<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/2 arial;}
.menu{ width:500px; margin:30px auto; height:30px; line-height:30px;}
.menu a{ float:left; margin-right:10px; padding:5px 10px;}
.menu a.cur,.menu a:hover{ background:#f3f3f3;}
</style>
</head>
<body>
<div class="menu"><a class="cur" href="#">111</a><a href="#">222</a><a href="#">333</a></div>
<script type="text/javascript">
var authors = $('.menu').find('a'), temp;
authors.click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
});
</script>
</body>
-----------------------------------------------------------------------------------------------------------------------------------------
根据ID动态改变菜单点击后样式
<script type="text/javascript">
function getgroupBg(num)
{
for(var id = 0;id<=6;id++)
{
if(id==num)
{
document.getElementById("mynav"+id).className="nav_a";
}
else
{
document.getElementById("mynav"+id).className="";
}
}
}
</script>
<!--页面底部代码：-->
<script type="text/javascript">
document.getElementById("mynav0").className="nav_a";
</script>
<!--导航代码：-->
<ul style="margin-top:0px;">
<li><a id="mynav0" onClick="getgroupBg(0);" href="javaScript:void(0)">000</a></li>
<li><a id="mynav1" onClick="getgroupBg(1);" href="javaScript:void(0)">111</a></li>
<li><a id="mynav2" onClick="getgroupBg(2);" href="javaScript:void(0)">222</a></li>
<li><a id="mynav3" onClick="getgroupBg(3);" href="javaScript:void(0)">333</a></li>
<li><a id="mynav4" onClick="getgroupBg(4);" href="javaScript:void(0)">444</a></li>
<li><a id="mynav5" onClick="getgroupBg(5);" href="javaScript:void(0)">555</a></li>
<li><a id="mynav6" onClick="getgroupBg(6);" href="javaScript:void(0)">666</a></li>
</ul>
- 本文固定链接: http://ttfde.top/index.php/post/185.html
- 转载请注明: admin 于 TTF的家园 发表
《本文》有 0 条评论