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