利用 jQuery 给导航 li 标签动态添加 .active 属性教程
摘要: 那么,问题就来了,如何东塔的给导航 li 标签动态添加 .active 属性呢,所以就有了这篇文章:利用 jQuery 给导航 li 标签动态添加 .active 属性教程。本教程为网上所找,结合沭阳web客户的网站而来。
个人认为discuz网址有很多不规范的地方,门户带protal.php后缀的,论坛带forum.php后缀的,为了导航的规范性,不少高玩建议我直接把导航条写死,所以就有了沭阳web-沭阳做网站 网站现在的导航。
但是有这样一个问题,就是点击某一个栏目后,被点击的导航没有一个被点击后的效果,如下图所示:
那么,问题就来了,如何东塔的给导航 li 标签动态添加 .active 属性呢,所以就有了这篇文章:利用 jQuery 给导航 li 标签动态添加 .active 属性教程。本教程为网上所找,结合沭阳web客户的网站而来。
一、导航代码:
二、在文件footer.html 网站底部引入jQuery 以及相应的javascript代码三、在CSS文件中加入下面的代码,然后更新缓存,看一下效果即可
以上的教程为本人亲测可以使用,请大家放心使用,如有任何问题可以留言,沭阳web可以和大家友善的交流学习的,有的朋友会问:为什么代码里面是两个$$符号呢,请各位转驾这篇Discuz默认JS和其他JS冲突的解决方案文章观看。
但是有这样一个问题,就是点击某一个栏目后,被点击的导航没有一个被点击后的效果,如下图所示:
那么,问题就来了,如何东塔的给导航 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>
- <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>
- .shuyangweb_nav .active {margin-left: -1px; background:#01477A; padding:0;}