jquery实现当前页面的标识选中效果

看到很多网友在搜索这个js选中效果的问题,其实实现方法很简单,只要理清思路没有实现不了的效果

需求:点击主导航标识当前页面,即选中效果

误区:点击了a标签页面就刷新或跳转了,怎么去实现效果啊?

思路:点击a标签后让它跳转,等跳转到另外一个页面后再去标识它,将实现这个效果的代码放在公共js里,以避免每个页面都要去写

实现代码:

比如主导航html结构是这样的

  1. <!--主导航--> 
  2. <ul id="nav"> 
  3.   <li><a href="index.html" class="current">首页</a></li> 
  4.   <li><a href="news.html">新闻</a></li> 
  5.   <li><a href="about.html">简介</a></li> 
  6. </ul> 

比如选中后的css效果是这样的

  1. .current{background:#000color:#fff}//当然你可以修饰的更漂亮,比如加背景图 

那么最终实现效果的jquery是这样的

  1. $(function(){ 
  2.   var winUrl = window.location.href;//获取当前浏览器地址 
  3.   $navNode = $("#nav>li").find("a");//主导航节点 
  4.   $navNode.removeClass("current");//在遍历前去掉所有的选中效果 
  5.   $navNode.each(function(){//遍历主导航节点 
  6.     var currentUrl = $(this).attr("href");//当前导航的url 
  7.     winUrl.indexOf(currentUrl) >-1 ? $(this).addClass("current") : '';//如果当前主导航的href地址和浏览器的url匹配,则选中 
  8.   }) 
  9.  
  10. }) 

如果要做的更符合用户体验的话,还可以加上鼠标移上去选中,移开则重新选中到当前

前端初学者不清楚的欢迎留言或者加入QQ讨论群:239274519

 

相关经验

导读书签
书签初始化中…