我正在使用无序列表<ul>创建一个标签菜单。我有7个标签。最初，第一个标签将处于活动状态，它应该有一个颜色，其他6个标签处于非活动状态，必须是另一种颜色。我编写了一个jquery，使<li>在单击选项卡时将类设置为活动状态。
我的jquery文件是
$(document).ready(function(){
$("ul#tabs li").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active");
$("ul#tab li:nth-child("+nthChild+")").addClass("active");
}
});
});
我的html文件是
<html>
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/tabs.js"></script>
<style>
#tab-menu ul li
{
background : #D9DADA;
background : rgba(217, 218, 218, 1);
top:1px;
list-style: none;
position: relative;
float: left;
width:68px;
height: 74px;
text-align: center;
line-height: 50px;
margin-right: 15px;
border-width: 1px 1px 0 1px;
border-radius : 7px 7px 7px 0px;
-moz-border-radius : 7px 7px 7px 0px;
-webkit-border-radius : 7px 7px 7px 0px;
}
#tab-content
{
background : -moz-linear-gradient(1613.26% -4814.7% -90deg,rgba(202, 188, 160, 1) 0%,rgba(217, 206, 184, 1) 38.04%,rgba(229, 221, 209, 1) 74.9%,rgba(217, 206, 186, 1) 87.84%,rgba(205, 190, 163, 1) 100%);
background : -webkit-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
background : -webkit-gradient(linear,1613.26% -4814.7% ,1613.26% -1286.93% ,color-stop(0,rgba(202, 188, 160, 1) ),color-stop(0.3804,rgba(217, 206, 184, 1) ),color-stop(0.749,rgba(229, 221, 209, 1) ),color-stop(0.8784,rgba(217, 206, 186, 1) ),color-stop(1,rgba(205, 190, 163, 1) ));
background : -o-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
background : -ms-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CABCA0', endColorstr='#CDBEA3' ,GradientType=0)";
background : linear-gradient(180deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CABCA0',endColorstr='#CDBEA3' , GradientType=0);
width:1000px;
height: 500px;
margin-left:40px;
padding: 10px 10px 10px 10px;
clear:both;
background-position:50px 0px;
border-radius : 7px 7px 10px 0px;
-moz-border-radius : 7px 7px 10px 0px;
-webkit-border-radius : 2px 7px 10px 0px;
}
.active
{
background : -moz-linear-gradient(1613.26% -4814.7% -90deg,rgba(202, 188, 160, 1) 0%,rgba(217, 206, 184, 1) 38.04%,rgba(229, 221, 209, 1) 74.9%,rgba(217, 206, 186, 1) 87.84%,rgba(205, 190, 163, 1) 100%);
background : -webkit-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
background : -webkit-gradient(linear,1613.26% -4814.7% ,1613.26% -1286.93% ,color-stop(0,rgba(202, 188, 160, 1) ),color-stop(0.3804,rgba(217, 206, 184, 1) ),color-stop(0.749,rgba(229, 221, 209, 1) ),color-stop(0.8784,rgba(217, 206, 186, 1) ),color-stop(1,rgba(205, 190, 163, 1) ));
background : -o-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
background : -ms-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CABCA0', endColorstr='#CDBEA3' ,GradientType=0)";
background : linear-gradient(180deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CABCA0',endColorstr='#CDBEA3' , GradientType=0);
}
</style>
</head>
<body>
<div id="tab-menu" class="tab-menu">
<ul id="tabs">
<li class="active"><a href="#"><img src="01.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="02.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="04.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="06.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="07.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="08.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="09.png" height="70" width="50"/></a></li>
</ul>
</div>
<div id="tab-content">
</div>
</body>
</html>
这里我为活动类编写了CSS。按钮单击操作正常但我需要将标签设置为不同颜色的非活动状态。有人可以帮我编码吗？