<!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>
<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>
显示效果为右图：
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
