您的位置：首页 > 其它

点击哪个，哪个下面的颜色变化

2017-08-03 17:39 323 查看
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{ font-size:16px; color:#333;}

ul,li{ list-style:none; margin:0; padding:0; border:0;}

a{ text-decoration:none; }

.wb{ width:1000px; margin:0 auto; }

.wb li{ float:left; width:10%; margin:0 2%; height:60px; line-height:60px; font-weight:bold; text-align:center;}

.clearfix{ clear:both;}

.wb li:hover{ border-bottom:2px solid #0070ba;}

.wb .current{ border-bottom:2px solid #0070ba;}

</style>

<script src="jquery.js"></script>

</head>

<body>

<div class="wb">
<ul>

    <li>首页</li>

        <li>钢轨</li>

        <li>钢板</li>

        <li>中厚板</li>

        <li>关于我们</li>

        <li>新闻</li>

        <li>联系我们</li>   

        

    </ul>

</div>

<script>

$(function(){
$(".wb li:eq(0)").addClass(".wb current")
  $(".wb li").click(function(){
$(this).addClass(".wb current")
.siblings().removeClass(".wb current")        
  })
})

</script>

</body>
</html>

显示效果为右图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航