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

2018-05-03 19:51| 发布者: 建站教程| 查看: 4008

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

个人认为discuz网址有很多不规范的地方，门户带protal.php后缀的，论坛带forum.php后缀的，为了导航的规范性，不少高玩建议我直接把导航条写死，所以就有了沭阳web-沭阳做网站网站现在的导航。

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

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

一、导航代码：

<div id="shuyangweb_nv">
<ul>
<li class="a"><a title="沭阳web首页" href="http://www.shuyangweb.com/">网站首页a>li>
<li><a title="沭阳建站教程" href="http://www.shuyangweb.com/jiaocheng/">建站教程a>li>
<li><a title="沭阳网站建设案例赏析" href="http://www.shuyangweb.com/anli/">案例赏析a>li>
<li><a title="沭阳做网站服务项目" href="http://www.shuyangweb.com/fuwu/">项目服务a>li>
<li><a title="沭阳网站seo分析" href="http://www.shuyangweb.com/seo/">SEO相关a>li>
ul>
div>

二、在文件footer.html 网站底部引入jQuery 以及相应的javascript代码

<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
<script type="text/javascript">
    var $$ = jQuery.noConflict();
    $$(document).ready(function () {
        $$('#shuyangweb_nv li a').each(function () {
            if ($$($$(this))[0].href == String(window.location))
                $$(this).parent().addClass('active');
        });
    })
script>

三、在CSS文件中加入下面的代码，然后更新缓存，看一下效果即可

.shuyangweb_nav .active {margin-left: -1px; background:#01477A; padding:0;}

以上的教程为本人亲测可以使用，请大家放心使用，如有任何问题可以留言，沭阳web可以和大家友善的交流学习的，有的朋友会问：为什么代码里面是两个$$符号呢，请各位转驾这篇Discuz默认JS和其他JS冲突的解决方案文章观看。

相关阅读