zoukankan      html  css  js  c++  java
  • 网站导航栏目焦点设置

    原文地址:http://www.w3dev.cn/article/20130411/website-nav-focus-item.aspx

    一般访问网站时,访问到不同的栏目,导航上的链接会高亮,显示的样式和其他栏目不一样,这种效果实现很简单,原理如下
    获取当前的url路径location.pathname,然后和导航中的链接匹配,匹配了就设置焦点样式。如果栏目不是页面,而是通过传递参数来实现,可以location.search中获取栏目参数来匹配。
    下面是一个就简单的示例,建立1.html,2.html,3.html,4.html文件,内容全部为下面贴出的html代码,

    <div id="dvGuider">
    <a href="1.html">1.html</a>
    <a href="2.html">2.html</a>
    <a href="3.html">3.html</a>
    <a href="4.html">4.html</a>
    </div>
    <style>
    a.focus{background:#ff0000;color:#ffffff;}
    </style>
    <script>
        var pn = location.pathname;
        var as = document.getElementById('dvGuider').getElementsByTagName('a'),find=false;
        for (var i = 0, j = as.length; i < j; i++)
            if (as[i].href.indexOf(pn) != -1) { as[i].className = 'focus'; find = true; break; }
        //if (!find) as[0].className = 'focus';//如果未找到匹配的,需要设置哪个获取焦点可以修改这句
    </script>
  • 相关阅读:
    poj 2155 B
    hdu 1556 A
    hdu 1556 A
    #366 A-C
    最长上升子序列
    Codeforces Div3 #501 A-E(2) F以后补
    字典的建立 查找
    字典序大小
    头文件模板
    01背包模板 及 优化
  • 原文地址:https://www.cnblogs.com/newlangwen/p/7832873.html
Copyright © 2011-2022 走看看