Jquery 如何在选项卡菜单中切换两种不同的颜色_Jquery_Html_Css

Jquery 如何在选项卡菜单中切换两种不同的颜色

jquery html css

Jquery 如何在选项卡菜单中切换两种不同的颜色,jquery,html,css,Jquery,Html,Css,我正在使用无序列表创建一个选项卡菜单。我有7个选项卡。最初，第一个选项卡将是活动的，它应该有一种颜色，其他6个不活动的选项卡必须是另一种颜色。我编写了一个jquery，使在单击选项卡时将类设置为活动。我的jquery文件是 $(document).ready(function(){ $("ul#tabs li").click(function(e){ if (!$(this).hasClass("active")) { var tabNum =

我正在使用无序列表创建一个选项卡菜单。我有7个选项卡。最初，第一个选项卡将是活动的，它应该有一种颜色，其他6个不活动的选项卡必须是另一种颜色。我编写了一个jquery，使

在单击选项卡时将类设置为活动。我的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>


#标签菜单ulli
{
背景：#D9DADA；
背景：rgba（2172182181）；
顶部：1px；
列表样式：无；
位置：相对位置；
浮动：左；
宽度：68px；
高度：74px；
文本对齐：居中；
线高：50px；
右边距：15px；
边框宽度：1px 1px 0 1px；
边界半径：7px 7px 7px 0px；
-moz边界半径：7px 7px 7px 0px；
-webkit边界半径：7px 7px 7px 0px；
}
#选项卡内容
{
背景：-moz线性梯度（1613.26%-4814.7%-90度），rgba（202188160,1）0%，rgba（217206184,1）38.04%，rgba（229221209,1）74.9%，rgba（217206186,1）87.84%，rgba（205190163,1）100%；
背景：-webkit线性梯度（-90度，rgba（202188，160，1）0%，rgba（217206，184，1）38.04%，rgba（229221209，1）74.9%，rgba（217206，186，1）87.84%，rgba（205190163，1）100%）；
背景：-webkit渐变（线性，1613.26%-4814.7%，1613.26%-1286.93%，颜色停止（0，rgba（202，188，160，1）），颜色停止（0.3804，rgba（217，206，184，1）），颜色停止（0.749，rgba（229，221，209，1）），颜色停止（0.8784，rgba（217，206，186，1）），颜色停止（1，rgba（205，190，163，1））；
背景：-o-线性梯度（-90度，rgba（202188160,1）0%，rgba（217206184,1）38.04%，rgba（229221209,1）74.9%，rgba（217206186,1）87.84%，rgba（205190163,1）100%；
背景：-ms线性梯度（-90度，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过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr='#CABCA0'，endColorstr='#CDBEA3'，GradientType=0）”；
背景：线性梯度（180度，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%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#CABCA0'，endColorstr='#CDBEA3'，GradientType=0）；
宽度：1000px；
高度：500px；
左边距：40px；
填充：10px 10px 10px 10px；
明确：两者皆有；
背景位置：50px 0px；
边界半径：7px 7px 10px 0px；
-moz边界半径：7px 7px 10px 0px；
-webkit边界半径：2px 7px 10px 0px；
}
.主动
{
背景：-moz线性梯度（1613.26%-4814.7%-90度），rgba（202188160,1）0%，rgba（217206184,1）38.04%，rgba（229221209,1）74.9%，rgba（217206186,1）87.84%，rgba（205190163,1）100%；
背景：-webkit线性梯度（-90度，rgba（202188，160，1）0%，rgba（217206，184，1）38.04%，rgba（229221209，1）74.9%，rgba（217206，186，1）87.84%，rgba（205190163，1）100%）；
背景：-webkit渐变（线性，1613.26%-4814.7%，1613.26%-1286.93%，颜色停止（0，rgba（202，188，160，1）），颜色停止（0.3804，rgba（217，206，184，1）），颜色停止（0.749，rgba（229，221，209，1）），颜色停止（0.8784，rgba（217，206，186，1）），颜色停止（1，rgba（205，190，163，1））；
背景：-o-线性梯度（-90度，rgba（202188160,1）0%，rgba（217206184,1）38.04%，rgba（229221209,1）74.9%，rgba（217206186,1）87.84%，rgba（205190163,1）100%；
背景：-ms线性梯度（-90度，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过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr='#CABCA0'，endColorstr='#CDBEA3'，GradientType=0）”；
背景：线性梯度（180度，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%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#CABCA0'，endColorstr='#CDBEA3'，GradientType=0）；
}

在这里，我为活动类编写了CSS。按钮点击动作工作正常，但我需要设置不同颜色的选项卡处于非活动状态。有人能帮我编码吗？

只需在CSS中将

.active

更改为

#选项卡菜单ul li.active

它会起作用的。

你能举个例子吗？我已经编辑了我的问题，请参考它。这对我来说很好。谢谢你的支持：）