html5导航栏,html5导航栏横排
html5如何做到使用导航栏切换页面时不重新加载页面
我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
创新互联长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为黔西企业提供专业的网站设计、成都网站建设，黔西网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了
下面附上代码
!DOCTYPE html
html
head
meta charset="UTF-8"
title标题/title
!--jQuery 百度CDN库--
script src=""/script
script
// jQuery代码
$(document).ready(function () {
$("#b1").click(function () {
$("#tab_1").show();// 显示
$("#tab_2").hide();// 隐藏
});
$("#b2").click(function () {
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1标题一/h1
/div
div
div
ul
libutton id="b1"菜单1/button/li
libutton id="b2"菜单2/button/li
/ul
/div
div
div id="tab_1"
子页面1
/div
div id="tab_2" style="display: none"
子页面2
/div
/div
/div
/body
/html
HTML5+CSS3小实例：全屏导航栏菜单
HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！
效果：
源码：
HTML5如何制作特效导航栏？
鼠标移上去时，改变li元素的大小、背景色、文字颜色等
代码如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
position: relative;
margin-left: 10px;
}
div {
width: 150px;
height: 500px;
border: 1px dashed #000000;
text-align: center;
}
.active {
background-color: green;
color: #fff;
}
.show {
width: 2px;
height: 20px;
position: absolute;
left: 10px;
top: 15px;
background-color: white;
}
.li1 {
left: 20px;
border-radius: 5px;
}
/style
/head
body
div id="div1"
ul
lispan/span雅望天堂1/li
lispan/span雅望天堂2/li
lispan/span雅望天堂3/li
lispan/span雅望天堂4/li
/ul
/div
script type="text/javascript"
var oLi = document.getElementsByTagName("li");
var oSpan = document.getElementsByTagName("span");
for (var i = 0; i oLi.length; i++) {
oLi[i].onmouseover = function() {
var sp = this.childNodes[0];
console.log(sp);
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
oSpan[i].setAttribute("class", "");
}
this.setAttribute("class", "active li1");
sp.setAttribute("class", "show");
}
oLi[i].onmouseout = function() {
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
}
}
}
/script
/body
/html
这应该是你要的效果
HTML5怎么做导航栏
建议使用FF，Safari，举个例子：
!doctype html
html
head
titleHTML5+CSS3+JavaScript/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta http-equiv="Content-Type" content="text/html; charset=gbk" /
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta http-equiv="Content-Language" content="zh-cn" /
meta name="Generator" content="EditPlus"
meta name="Author" content=""
meta name="Keywords" content=""
style type="text/css"
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}
#menu {
width:982px;
height:35px;
margin-top:20px;display:block;
background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
-webkit-border-top-left-radius:4px;;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
text-shadow: 0 1px 0 white;
}
#menu ul {
margin-left:0;
}
#menu ul li {
display:inline;
}
#menu ul li a:link, a:visited {
text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
}
#menu ul li a:hover {
text-decoration:none;
background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
background: -moz-linear-gradient(top, #333, #ccc);
-webkit-background-size:0 35px;
color: #ddd;
text-shadow: 0 1px 0 black;
}
.text {
border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
-webkit-border-top-left-radius:90px;;
-webkit-border-top-right-radius:90px;
-moz-border-radius-topleft:90px;
-moz-border-radius-topright:90px;
-webkit-border-bottom-left-radius:90px;
-webkit-border-bottom-right-radius:90px;
-moz-border-radius-bottomleft:90px;
-moz-border-radius-bottomright:90px;
-o-border-radius:90px;
-khtml-border-radius:90px;
}
/style
script language="JavaScript" type="text/javascript"
(function()
{
if(!0)
return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
while(ilength)
{
document.createElement_x(e[i++])
}
})();
/script
/head
body
menu id="menu"form action="index.php" method="get"
ul
lia href="#" title="HomePage"HomePage/a/li
lia href="#" title="Introuduce"Introuduce/a/li
lia href="#" title="Products"Products/a/li
lia href="#" title="My album"My album/a/li
lia href="#" title="Shopping"Shopping/a/li
lia href="#" title="Contact our"Contact our/a/li
/ul
input type="search" class="text" value="search..." //form
/menu
body
分享标题：html5导航栏,html5导航栏横排
网站地址：http://mswzjz.cn/article/dsdhijp.html