当前位置:主页 > 知识大宝库 > 代码素材 >

简单常用的js当前栏目高亮代码。

来源:未知  作者:南宁网站建设  日期:2015-08-10 14:37

<div class="h_nav menu" id="nav">
        <ul>
        <li onclick="document.location='/" style="padding-left:17px;"><span>网站首页</span></li>      
      <li><a href='/guanyu.html'><span>关于我们</span></a></li>
     <li><a href='/lxwm.html'><span>联系我们</span></a></li>
        </ul>
    </div>
上面是div代码。样式可以根据自己的需要修改。这时候网站首页不建议使用a标签定义。因为下面的js代码是遍历所有id下面的a属性。如果网站首页添加上a标签的话,那么页面的高亮会显示网站首页和当前栏目2个高亮。js代码如下。
<script type="text/javascript">
var myNav = document.getElementById("nav").getElementsByTagName("a");   
for(var i=0;i<myNav.length;i++)   
{   
   var links = myNav[i].getAttribute("href");   
    //alert(links)   
   //alert(myNav[i]);   
   var myURL = document.location.href;    
   if(myURL.indexOf(links) != -1)   
   {   
      myNav[i].className="cur";   
    }   
</script>

是不是很简单。我也是在网站制作中遇到难题就百度一下。其实有时候不是我们非要有多高的技术,而是我们要学会利用素材和搜索工具。这是一种经验的积累!

备注: 燕子打个小广告哦。本站承接各行业网站建设企业仿站。希望能长期与其他网络公司合作。保质保量保售后!


本文地址:http://g9gx.com/zhishi/sucai/53.html 在线咨询

上一篇:网页制作中简单实用的选项卡代码

下一篇:js图文列表向左滚动

关注&咨询
谷九建站