谁有鼠标点击超链接导航时,样式仍然保持的一段js代码
谁有鼠标点击超链接导航时,样式仍然保持的一段js代码
如果回答如下就不必了
   <script type="text/javascript">
   $(function(){
$(".nav > ul > li").click(function(){
   $(this).siblings().removeClass("visit");
   $(this).addClass("visit");
});
$(".nav > ul > li").mouseover(function(){
   $(this).siblings().removeClass("hover");
   $(this).addClass("hover");
});
   });
});
</script>
因为它只适用于本页面,如果跳转其他页面(一样的导航条)就不行了,
------解决方案--------------------<a href="aa.htm" target="_blank">aa</a>
就是给a标签加上target这个属性,就是新窗口打开,这样也不会影响到页面里的a标签点击后的样式
------解决方案--------------------通过 URL 后缀来判断 例如 产品页面 products.html 就知道是那个导航的了
要不是就通过 cookie  来搞
------解决方案--------------------
页面加载根据url 设置样式!
<div id="nav">
 <ul>
 <li><a href="/">网站首页</a></li>
 <li><a href="Basics.aspx?ChannelID=1">关于我们</a></li>
 <li><a href="Products.aspx?ChannelID=4">新品推荐</a></li>
 <li><a href="Products.aspx?ChannelID=3">产品中心</a></li>
 <li><a href="Articles.aspx?ChannelID=5">新闻中心</a> </li>
 <li><a href="Jobs.aspx?ChannelID=6">人才招聘</a> </li>
 </ul>
  </div>
</div>
<script type='text/javascript'>  
      (function(){        
           var nav= $('nav');
             var menuList = nav.getElementsByTagName('a');
       var url = document.location.href;
       var hrefUrl = '';
       if(menuList==null || typeof(menuList)=='undefined')
       { return;}
       var index=0;
       for(;index < menuList.length;index++)
       {
           hrefUrl = menuList[index].href;
           hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
           if(hrefUrl!='' && hrefUrl != '/')
           {
               if(url.indexOf(hrefUrl) > 0 )
               {
                   break;
               }
           }
       }
       if(index <  menuList.length)
       {
           menuList[index].id = 'a_Checked'; // 用ID控制当前菜单样式,当然也可以用 class 和style
       }      
       })();      
   </script>