html5导航栏,html5导航栏横排

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

html5如何做到使用导航栏切换页面时不重新加载页面

我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。

实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：

建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。

用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

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

/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"

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"

lia href="#" title="HomePage"HomePage/a/li

lia href="#" title="Introuduce"Introuduce/a/li

lia href="#" title="Products"Products/a/li