
部分css代码
.st{background: white;width: 89px;height: 24px;border-radius: 7px;color: blue}
<div class="headr" id="nav">
<ul>
<li><a href="" class="st">首页</a></li>
<li><a href="">行业动态</a></li>
<li><a href="">产品展示</a></li>
<li><a href="">知识学堂</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="" >留言板</a></li>
<li><a href="">人才招聘</a></li>
</ul>
</div>
这是html代码
那么对应的js代码就是
这是html代码
那么对应的js代码就是
<script type="text/javascript">
$(function(){
$("#nav>ul>li>a").mouseover(function(){
$("#nav>ul>li>a").each(function(){
$(this).removeClass("st");
});
$(this).addClass("st");
}).mouseout(function(){
$(this).addClass("st");
})
});
</script>
原理就是遍历ul 下面的li 经过当前的li就给当前的添加样式,其它的移除样式
原理就是遍历ul 下面的li 经过当前的li就给当前的添加样式,其它的移除样式