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>
    

      

  • 相关阅读:
    PLSQL连接64位oracle,导入导出错误解决办法
    VS2008或者VS2010工具栏,标准里面的 在浏览器中浏览按钮不见了
    jquery radio取值,checkbox取值,select取值 及选中
    Waiting for HOME (‘android.process.acore’) to be launched…解决办法
    GetTickCount() 函数的作用和用法
    MFC ado连接access数据库
    VC切分窗口和多视图
    C++容器——插入与清除
    VC中在对话框上显示图片
    error LNK2005 已经在***.obj中定义
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/12102144.html
Copyright © 2011-2022 走看看