首页>前端教程>JavaScript教程

导航栏页面跳转时,如何为当前页添加选中状态的样式?

当我们制作导航栏的时候,希望在当前页添加一个选中的状态,方便用户识别自己的当前位置。

如图所示:

导航栏栏目切换实现当前页面的选中状态.gif

完成这个效果有两种方法,一种是在a标签上添加current样式,一种是在li上面添加current样式,两种办法都可以。

一、HTML结构

<div class="divNavBar">
    <ul>
        <li><a href="http://localhost/">首页</a></li>
        <li><a href="http://localhost/category-12.html">前端教程</a></li>
        ...
        <li><a href="http://localhost/aboutme.html">关于我</a></li>
        <li><a href="http://localhost/all.html">文章归档</a></li>
    </ul>
</div>

二、CSS样式

如果是为li添加class为current的样式

.divNavBar>ul>li.current{
	background-color:#5EB309;}

三、JavaScript代码

$(function(){	
  $(".divNavBar>ul>li>a").each(function(){ 
   $this = $(this); 
    if($this[0].href==String(window.location)){ //判断当前a的链接是不是和浏览器地址栏链接一致
        $(this).parent().addClass('current');  //一致,则为当前a的父元素li添加class为current属性
	$(this).siblings().removeClass("current"); //为当前li的兄弟姐妹元素移除class属性

	}
      }) 
   })

可以查看到随着导航栏的点击,li在切换class属性。

为导航栏的li切换class属性.gif

第二种方法则是为a添加。

那么css样式则是:

.divNavBar>ul>li>a.current{
	background-color:#5EB309;}

javascript脚本则是:

$(function(){	
  $(".divNavBar>ul>li>a").each(function(){ 
   $this = $(this); 
    if($this[0].href==String(window.location)){ //判断当前a的链接是不是和浏览器地址栏链接一致
        $this.addClass("current");;  //一致,则为当前a添加class为current属性
	this.parent().siblings().children("a").removeClass("current"); //为当前a的父元素li的兄弟姐妹元素的子元素a移除class属性

	}
      }) 
   })

效果都是一样的,就不截图啦。

点赞


12
保存到:

相关文章

Top