1，Html代码
1 <body> 2 <div id="box"> 3 <ul id="tab_nav"> 4 <li class="nonblank">购买标书</li> 5 <li class="blank"></li> 6 <li class="nonblank">法授</li> 7 <li class="blank"></li> 8 <li class="nonblank">银行资质证明</li> 9 <li class="blank"></li> 10 <li class="nonblank">查阅档案</li> 11 <li class="blank"></li> 12 <li class="nonblank">投标分工确认</li> 13 <li class="blank"></li> 14 <li class="nonblank">公章使用</li> 15 <li class="blank"></li> 16 <li class="nonblank">购买</li> 17 </ul> 18 </div> 19 </body>
2，CSS代码
<style type="text/css">
#box
{
height: 300px;
margin-top: 200px;
margin-left: 200px;
}
.nonblank
{
float: left;
list-style: none;
border: 1px solid #999;
height: 31px;
line-height: 31px;
width: 110px;
text-align: center;
background-color: #efeff7;
font-size: 15px;
font-weight: 600;
cursor:pointer;
}
.blank
{
float: left;
border:none;
border-bottom:1px solid #999;
width:5px;
line-height:31px;
height: 32px;
margin:0;
list-style: none;
}
</style>
3，JS代码
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("li[class=nonblank]").each(function (index) {
$(this).mouseover(function () {
// $(this).css("backgroundColor", "red");
}).click(function () {
$("li[class=nonblank]").css("backgroundColor", "#efeff7");
$("li[class=nonblank]").css("borderBottom", "1px solid #999");
$(this).css("backgroundColor", "white");
$(this).css("borderBottom", "none");
}).mouseout(function () {
// $("li[class=nonblank]").css("backgroundColor", "#efeff7");
})
})
})
</script>
4，效果图
CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）
时间： 2024-08-19 04:30:58