利用 jQuery 给导航 li 标签动态添加 .active 属性教程

摘要: 那么,问题就来了,如何东塔的给导航 li 标签动态添加 .active 属性呢,所以就有了这篇文章:利用 jQuery 给导航 li 标签动态添加 .active 属性教程。本教程为网上所找,结合沭阳web客户的网站而来。
个人认为discuz网址有很多不规范的地方,门户带protal.php后缀的,论坛带forum.php后缀的,为了导航的规范性,不少高玩建议我直接把导航条写死,所以就有了沭阳web-沭阳做网站 网站现在的导航。

但是有这样一个问题,就是点击某一个栏目后,被点击的导航没有一个被点击后的效果,如下图所示:

那么,问题就来了,如何东塔的给导航 li 标签动态添加 .active 属性呢,所以就有了这篇文章:利用 jQuery 给导航 li 标签动态添加 .active 属性教程。本教程为网上所找,结合沭阳web客户的网站而来。

一、导航代码:
  1. <div id="shuyangweb_nv">  
  2. <ul>  
  3. <li class="a"><a title="沭阳web首页" href="http://www.shuyangweb.com/">网站首页a>li>  
  4. <li><a title="沭阳建站教程" href="http://www.shuyangweb.com/jiaocheng/">建站教程a>li>  
  5. <li><a title="沭阳网站建设案例赏析" href="http://www.shuyangweb.com/anli/">案例赏析a>li>  
  6. <li><a title="沭阳做网站服务项目" href="http://www.shuyangweb.com/fuwu/">项目服务a>li>  
  7. <li><a title="沭阳网站seo分析" href="http://www.shuyangweb.com/seo/">SEO相关a>li>  
  8. ul>  
  9. div> 
二、在文件footer.html 网站底部引入jQuery 以及相应的javascript代码
  1. <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>  
  2. <script type="text/javascript">  
  3.     var $$ = jQuery.noConflict();  
  4.     $$(document).ready(function () {  
  5.         $$('#shuyangweb_nv li a').each(function () {  
  6.             if ($$($$(this))[0].href == String(window.location))  
  7.                 $$(this).parent().addClass('active');  
  8.         });  
  9.     })    
  10. script> 
三、在CSS文件中加入下面的代码,然后更新缓存,看一下效果即可
  1. .shuyangweb_nav .active {margin-left: -1pxbackground:#01477Apadding:0;}  
以上的教程为本人亲测可以使用,请大家放心使用,如有任何问题可以留言,沭阳web可以和大家友善的交流学习的,有的朋友会问:为什么代码里面是两个$$符号呢,请各位转驾这篇Discuz默认JS和其他JS冲突的解决方案文章观看。

相关阅读