zoukankan      html  css  js  c++  java
  • JavaScript判断地址栏链接与导航栏链接是否一致并给导航添加class

    根据判断地址栏网址与当前导航栏网址是否一致,如果一致添加样式

    <ul class="daohang">
    <li id="a0" class="li0">
    <a href="/" onmouseover="Mea(0);">网站首页</a>
    </li>
    <li id="a1" class="li1">
    <a href="/product.html" onmouseover="Mea(1);">产品中心</a>
    </li>
    <li id="a2" class="li0">
    <a href="/news-center.html" onmouseover="Mea(2);">新闻中心</a>
    </li>
    <li id="a3" class="li0">
    <a href="/case/" onmouseover="Mea(3);">客户案例</a>
    </li>
    <li id="a4" class="li0">
    <a href="/q/" onmouseover="Mea(4);">产品问答</a>
    </li>
    <li id="a5" class="li0">
    <a href="/company.html" onmouseover="Mea(5);">走进红星</a>
    </li>
    <li id="a6" class="li0">
    <a href="/contact.html" onmouseover="Mea(7);">联系我们</a>
    </li>
    </ul>
    
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
    var path = window.location.pathname;  // pathname 为域名后的值   调取地址栏链接请用href
    $('.daohang a').each(function(i,n){   //获取导航下的链接
    if($(n).attr('href') == path)
    {
    $(this).parent().addClass('active');   //给当前链接的父元素 li添加class
    }
    });
    </script>

    另一种方式:

    先看效果:即点击链接时,让链接的父分类显示,且刷新不变

    <ul class="daohang">
    <li class="sidebar-dropdown"><a class="cz-current-elem" href="#"><i class="glyphicon glyphicon-pencil" style="color: #337ab7;"></i><span>文章管理</span></a>
    <div class="sidebar-submenu">
    <ul>
    <li><a class="cz-current-elem" href="<?php echo getset("siteurl");?>/article-add.php">添加文章</a>
    </li>
    <li><a href="<?php echo getset("siteurl");?>/article.php">文章列表</a>
    </li>
    <li><a href="<?php echo getset("siteurl");?>/category.php?type=article">文章分类</a>
    </li>
    <li><a href="<?php echo getset("siteurl");?>/category-add.php?type=article">添加分类</a>
    </li>
    </ul>
    </div>
    </li>
    </ul>

    因链接中有?号  category.php?type=article,使用 pathname 只能获取到 ?号前的链接,所以改用 herf

    <script>
    var path = window.location.href; //href获取的是完整的地址栏链接
    $('.daohang a').each(function(i,n){   
    if($(n).attr('href') == path)
    {
    $(this).closest('div').css('display','block');  //给当前链接的父div添加行间样式
    } }); </script>
    <script>
    var path = window.location.href;  //href获取的是完整的地址栏链接
    $('.daohang a').each(function(i,n){   
    if($(n).attr('href') == path)
    {
    $(this).closest('div').css('display','block'); //给当前链接的父div添加行间样式
    $(this).css('color','#337ab7'); //给当前链接加字体颜色
    $(this).closest('div').closest('li').children('a').children('i').css('color','#337ab7'); //给当前链接的父div的父li的子a的i元素加字体颜色
    
    }
    });
    </script>
    

      

  • 相关阅读:
    ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统(2)
    ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统(1)
    ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统(开篇)
    时间文本框,入职时间,工龄的换算
    javascript中this的用法
    web的Tomcat8部署文档
    rabbitMQ集群安装部署
    Python实现统计Jenkins multibranch发布的分支及时间等 页面 … 部署文档 跳到banner的尾部 回到标题开始 转至元数据结尾
    centos 7 DNS部署
    MongoDB3.X参数文件
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/12102144.html
Copyright © 2011-2022 走看看