js导航栏高亮（js导航栏代码）
本文目录一览：
请教用JS实现导航栏高亮，鼠标经过时和当前
script type="text/javascript" src=""/script
style
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cur{ background:#D96C00; font-weight:bold;}
/style
ul class="c9d6-5648-924f-14d8 menu" id="menu"
lia href="demo1.html?aa=1"首页/a/li
lia href="demo1.html?aa=2"栏目一/a/li
lia href="demo1.html?aa=3"栏目二/a/li
/ul
script type="text/javascript"
var urlstr = location.href;
//alert(urlstr);
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) -1$(this).attr('href')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
/script
如何让导航条高亮显示
在web开发中会遇到这样一个问题：当你点击某一个导航时，就让他高亮显示，其他的默认。
可以用一下两种方法解决：
1，在每一个文件中都引入头部，然后为不同的链接添加样式
缺点：比较麻烦，如果要修改样式，每个文件都要修改
2，把头部提出来，用js判断url地址，然后给当前的url加上样式（用js控制的）
!--导航条高亮---
!---以下是html部分，给div添加一个id--
div class="5648-924f-14d8-1427 nav_nav"
id="tabs_nav"
a href="/"
class="924f-14d8-1427-e423 active"公司首页/aahref="/product/product.php"
公司简介/aahref="/shop/map.php"雅酷地图/ab/bahref="/shop/shop.php"合作商户/aahref="/shop/shop_search.php"商户搜索/a/div
!---以下是js部分--
script type="text/javascript"
//获取div下面所有的a标签（返回节点对象）
var myNav =
document.getElementByIdx_x("tabs_nav").getElementsByTagName_r("a");
//获取当前窗口的url
var myURL = document.location.href;
//循环div下面所有的链接，
for(var i=1;imyNav.length;i++){
//获取每一个a标签的herf属性varlinks = myNav[i].getAttribute("href");
var myURL =
document.location.href;
//查看div下的链接是否包含当前窗口，如果存在，则给其添加样式
if(myURL.indexOf(links)!= -1){
myNav[i].className="active";
myNav[0].className="";}}
这个很有用，以后会用到~！
用js高亮当前栏目导航
//html 代码
//调用 css
link rel="stylesheet" type="text/css" href="css.css" /
a href="#" class="14d8-1427-e423-9bbe menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"百度/a
a href="#" class="1427-e423-9bbe-f593 menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"谷歌/a
////////////////////////////
css.css代码:
.menu1
{
width:120px;
height:auto;
font-weight:bold
}
.menu2
{
width:120px;
height:18px;
}
