日期:2014-05-16  浏览次数:20365 次

谁有鼠标点击超链接导航时,样式仍然保持的一段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>