zoukankan      html  css  js  c++  java
  • 高亮效果,比如导航高亮

    html部分:

    <div id="nav">

    <ul>

    <li><a href="">导航</a></li>

    <li><a href="">导航</a></li>

    <li><a href="">导航</a></li>

    <li><a href="">导航</a></li>

    <li class="selected"><a href="">导航</a></li>

    </ul>

    </div>

     

    js部分:

    <script type ="text/javascript" language ="javascript">

                 var nav = document.getElementById( "nav");

                 var links = nav.getElementsByTagName("li" );

                 var lilen = nav.getElementsByTagName("a" ); //判断地址

                 var currenturl = document. location.pathname.slice(0, -5);

                var last = 0;

                 for ( var i = 0; i < links.length; i++) {

                     var linkurl = lilen[i].getAttribute( "href").slice(0,-5);

                    if (currenturl.indexOf(linkurl) != -1 ) {

                        last = i;

                    }

                }

               links[last].className = "selected"; //高亮代码样式

    </script>

  • 相关阅读:
    浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
    DOM扩展:DOM API的进一步增强[总结篇-下]
    DOM扩展:DOM API的进一步增强[总结篇-上]
    Network 第九篇
    Network 第八篇 – 动态路由-OSPF
    Network 第七篇
    Network 第六篇
    Network 第五篇
    Network 第四篇
    Network 第三篇
  • 原文地址:https://www.cnblogs.com/chengmingxiaowu/p/7598008.html
Copyright © 2011-2022 走看看