Question

我试图制作一些带有自定义内容的下拉选项卡，当我单击选项卡时会显示这些内容，但是在颜色更改方面存在一些问题。我把计数脚本放在那里，但是效果不好。我需要先关闭标签页，然后再打开另一个标签才能看到它的正常工作（标签页背景颜色不断变化）。问题是，如何更改此代码以使选项卡正确更改颜色？

CSS

    .home-wsparcie-tabs li {
        border: 2px solid #E9134D;
        margin: 1px;
        display: inline-block;
        float: left;
    }  
    .home-wsparcie-tabs li a{
        padding: 20px 40px !important;
        display: block;
    }
    .home-wsparcie-tabs li:nth-child(1){
        border-radius: 10px 0 0 10px;
    }
    .home-wsparcie-tabs li:nth-last-child(1){
        border-radius: 0 10px 10px 0;
    }
    .active_wsparcie a {
        background: #E9134D;
        color: #fff;
    }
    .wsparcie_content {
        width: 100%;
        text-align: center;
    }
    .clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}

HTML

<div id="wsparcie_tabs_container">
<ul class="tabs home-wsparcie-tabs">
    <li>
        <a rel="#tab_1_contents" class="wsparcie_tab">FIRST TITLE</a>
    </li>
    <li>
        <a rel="#tab_2_contents" class="wsparcie_tab">SECOND TITLE</a>
    </li>
    <li>
        <a rel="#tab_3_contents" class="wsparcie_tab">THIRD TITLE</a>
    </li>
</ul>

<div class="clear"></div>

    <div class="tab_contents_container">
        <div id="tab_1_contents" class="wsparcie_content tab_contents tab_contents_active">First tab content...</div>
        <div id="tab_2_contents" class="wsparcie_content tab_contents">Second tab content</div>
        <div id="tab_3_contents" class="wsparcie_content tab_contents">Third tab content</div>
    </div> 
</div>

JS

$('.tab_contents').hide();
var count = 0; 
$('.wsparcie_tab').click(function() {
    count++;
    var target = $(this.rel);  
     $('.tab_contents').not(target).hide();
     target.slideToggle(100);
    $('#wsparcie_tabs_container > .tabs > li.active_wsparcie')
    .removeClass('active_wsparcie');
    if((count % 2) != 0) { 
         $(this).parent().addClass('active_wsparcie');
     } else { 
         $(this).parent().removeClass('active_wsparcie');
     } 
 $('#wsparcie_tabs_container > .tab_contents_container > div.tab_contents_active')
  .removeClass('tab_contents_active');
 $(this.rel).addClass('tab_contents_active');
});

颜色变化的标签

0 个答案: