导航切换代码（切换导航切换）

本篇文章给大家谈谈导航切换代码，以及切换导航切换对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）
• 2、纯js怎样实现网站导航栏的切换？
• 3、如何用JS实现 网站导航的切换
• 4、html,导航条切换，内容切换问题

HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）

1、利用css的:hover

div id="content"  

    这是原本的div层  

    div id="show"  

        p这是鼠标移动上去后的div层/p  

    /div  

/div 

style type="text/css"  

        *{  

            margin: 0;  

            padding: 0;  

        }  

        #content{  

            background:#0CF;  

            height:200px;  

            width:200px;  

            margin-left: 20px;  

            margin-top: 20px;  

        }  

        #show{  

            width:200px;  

            height:200px;  

            margin-top: 20px;  

            background:#F09;  

            top:0px;  

            position:absolute;  

            opacity: 0;  

            display: block;  

            font-size: 12px;  

            transition: 0.3s;  

            -webkit-transition: .5s;  

            -moz-transition: .5s;  

        }  

        #content:hover #show{  

            color: #656e73;  

            opacity: 1;  

        }  

    /style

纯js怎样实现网站导航栏的切换？

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title多选项切换导航菜单/title

/head

style type="text/css"

#dNavBar{

background-color:#ffffff;

}

#dNavBar li{

list-style-type:none;

float:left;

width:84px;

height:28px;

line-height:28px;

font-size:12px;

color:#FFFFFF;

border:1px solid #ffffff;

background:#86C2FF;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background:#99cc66;

width:500px;

border-left:1px solid #ffffff;

border-right:1px solid #ffffff;

height:29px;

line-height:29px;

color:#FFFFFF;

font-size:12px;

padding-left:10px;

}

body {

margin: 0px;

}

a:link,a:visited {

color: #FFFFFF;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: none;

}

/style

script language="javascript"

function ShowMenu()

{

var barCTT=document.getElementByIdx_x("dNavBar")

var liArr=barCTT.getElementsByTagName_r("li")

var links=new Array()

links[0]="a href='#'当前位置：首页"

links[1]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a"

links[2]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"

links[3]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a | a href='#'项目五/a"

links[4]="a href='#'项目一/a | a href='#'项目二/a"

links[5]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"

links[6]="a href='#'项目一/a | a href='#'项目二/a"

links[7]="a href='#'项目一/a | a href='#'项目二/a"

links[8]="a href='#'项目一/a | a href='#'项目二/a"

links[9]="a href='#'项目一/a | a href='#'项目二/a"

links[10]="a href='#'项目一/a| a href='#'项目二/a"

links[11]="a href='#'项目一/a | a href='#'项目二/a"

links[12]="a href='#'项目一/a | a href='#'项目二/a"

for (i=0;iliArr.length;i++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;iallLi.length;i++)

{

allLi[i].style.border="1px solid #ffffff";

allLi[i].style.backgroundColor="#86C2FF";

allLi[i].style.height="28px";

if (indexObj==allLi[i])

{

index=i;

}

}

indexObj.style.borderBottom="0px solid #666688";

indexObj.style.backgroundColor="#99cc66";

indexObj.style.height="31px";

document.getElementByIdx_x("subMenu").innerHTML=infoArr[index];

}

/script

body onLoad="ShowMenu()"

div id="dNavBar" style="float:none; width:560px;"li首页/lili娱乐快报/lili音乐天地/lili极品FLASH/li

/div

div id="subMenu"站务公告/div

/body

/html

如何用JS实现 网站导航的切换

1.首先将以下代码插入到你body需要设置导航的地方

div id="navmenu"

ul id="navi"

lia href="index.htm" _fcksavedurl="index.htm"梧桐首页

/a/li

lia href="index1.htm" _fcksavedurl="index1.htm"网站优化

/a/li

/ul

/div

script type="text/javascript" language="javascript"

var nav = document.getElementById("navi");

var links = nav.getElementsByTagName("li");

var lilen = nav.getElementsByTagName("a"); //判断地址

var currenturl = document.location.href;

var last = 0;

for (var i=0;ilinks.length;i++)

{

var linkurl = lilen[i].getAttribute("href");

if(currenturl.indexOf(linkurl)!=-1)

{

last = i;

}

}

links[last].className = "navon"; //高亮代码样式

/script

2.然后将以下CSS代码添加到你网站的CSS文件中

#navmenu{ width:980px;}

#navmenu ul{ padding:0px; margin:0px;}

#navmenu ul li{ float:left; width:80px; list-style:none;

text-align:center; height:30px; line-height:30px;}

.navon{ background:#000000;} .navon a{ color:#ffffff;}

看下这个吧，JS跟简单。但是没有JS，更没有DW，写不了。

html,导航条切换，内容切换问题

tab切换的效果 网上百度一大堆！代码自己研究，个人不是很喜欢拿来主义！

导航切换代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于切换导航切换、导航切换代码的信息别忘了在本站进行查找喔。