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

时间:2015-07-17 06:59:43

标签: jquery html css

我正在使用无序列表<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。按钮单击操作正常但我需要将标签设置为不同颜色的非活动状态。有人可以帮我编码吗?

1 个答案:

答案 0 :(得分:1)

JSFiddle

只需在 CSS 中将.active更改为#tab-menu ul li.active

它会起作用..