用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。
本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。
当前（活动）菜单样式变化实现原理
在html代码中给首页（默认选中）加上class名cur
<a href="demo.html?aa=1" class="cur">首页</a>
完整导航代码：
<nav id="menu"> <ul> <li><a href="demo.html?aa=1" class="cur">首页</a></li> <li><a href="demo.html?aa=2">网页制作</a></li> <li><a href="demo.html?aa=3">网页设计</a></li> <li><a href="demo.html?aa=4">HTML教程</a></li> <li><a href="demo.html?aa=5">web前端</a></li> <li><a href="demo.html?aa=6">网站运营</a></li> <li><a href="demo.html?aa=7">建站入门</a></li> <li><a href="demo.html?aa=8">联系我们</a></li> </ul> </nav>
在点击切换的过程中，我们需要给被选中的子选项添加类“cur”，然后让其它子选项删除类“cur”。
jquery实现当前（活动）菜单样式变化实例
本例使用jquery，需要在<head></head>之间添加jquery.min.js
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
通过js中的location.href得到当前页面的地址，然后与导航上的链接地址匹对，如果相同则说明是当前菜单，要增加类“cur”，其他菜单删除类“cur”，代码如下：
<script type="text/javascript">
var urlstr = location.href;
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>
导航菜单样式代码：
<style>
nav { padding:0; margin:0 auto; width:808px;}
ul,li{list-style-type:none;padding:0; margin:0; }
nav li { background: #060; margin-right:1px; float:left; color:#fff; }
nav li a { display:block; width:100px; text-align:center; height:50px; line-height:50px; color:#fff; font-size:16px; text-decoration:none;}
.cur{ background: #F90; font-weight:bold;}
</style>
示例中的导航使用的是背景颜色，鼠标点击后某菜单成当前菜单后，该菜单项背景颜色会变化，成高亮显示。
你可以把背景颜色改变成很cool的导航图片哦！
tab选项卡切换也是同样道理。
在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class，然后改这个class的样式，比如起一个class名叫“active”。
我们可以用JS从tab项或导航菜单中添加和删除该class类名，方法如下：
1、通过JS取到所有tab的节点
var arr = document.getElementsByClassName("tab_item");
2、在被选中的子节点加上.classList.add(“类名”)，比如：
arr[i].classList.add("active");
这样就给当前子选项卡添加了“active”类样式。
3、把其他的选项卡的“active”移除，只需要在其他子节点的后面加上.classList.remove(“类名”)：
arr[j].classList.remove("active");
使用js实现tab选项卡不同选项样式切换，你可以参考以上方法实现。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1166.html
微信扫一扫 
支付宝扫一扫 