1

我不知道如何在标题中表达这一点，但可以说你有这样的内容：

    <script type="text/javascript">

    $(document).ready(function(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab");
        $('#tab1').css("activeTab");
    })

    function tab1(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab"); // add class activeTab to show active
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab2(){
        $('#tabp2').show();
        $('#tabp1').hide();
        $('#tabp3').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').addClass("activeTab"); // add class activeTab to show active
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab3(){
        $('#tabp1').hide();
        $('#tabp3').show();
        $('#tabp2').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').addClass("activeTab"); // add class activeTab to show active
    }

</script>

和 HTML

<div id="table-tabs">
                <ul>
                    <li id="tab1" class="tab"><a onClick="tab1();">Accommodation</a></li>
                    <li id="tab2" class="tab"><a onClick="tab2();">Special Offers</a></li>
                    <li id="tab3" class="tab"><a onClick="tab3();">Photo Gallery</a></li>
                </ul>
                <div id="tabp1">Tab 1:  nulla facilisi. Nam liber tempor cum soluta 
                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus</div>

                <div id="tabp2">Tab 2 content</div>

                <div id="tabp3">This one here is tab 3, full of Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
                    erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
            </div>
        </div><!-- end table tabs -->

最后，CSS：

  #content-left #mainLeftContent #table-tabs ul li.oldTab{
    /* sets background and text color */
}

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.activeTab{
    background-color: #015f01;
}
#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

#content-left #mainLeftContent #table-tabs ul li.tab{
    padding: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}

我需要 javascript 不仅选择：

#content-left #mainLeftContent #table-tabs ul li.activeTab

但是也：

#content-left #mainLeftContent #table-tabs ul li.activeTab a

这应该是可能的，有什么想法吗？

只是为了澄清这里的问题：

javascript 正确应用了 activeTab 类，但是我需要将文本设置为白色，所以当我选择一个（在活动选项卡之后）并将颜色更改为白色时，它不会应用它。

有趣的变化，我改变了锚属性上的文本大小，它改变了大小，所以我认为这是颜色的问题

4

4 回答 4

2

这两个选择器同样精确，这意味着将使用最后一个声明的选择器

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

您可以通过使用默认颜色来修复它，该颜色在活动时会被覆盖

/* white when active (now more precise because of li.activeTab */
#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}
/* default black */
#content-left #mainLeftContent #table-tabs ul li a{
    color: black;
}
于 2012-08-03T09:43:16.150 回答
0

因此，假设您选择“#table-tabs ul li a”：

$("#table-tabs ul li a").click( function(e) {

e.preventDefault();

$(this).parent().toggleClass('tab activeTab'); //Remove class tab, add class activeTab

});
于 2012-08-03T09:39:29.247 回答
0

你应该改变，只需放置！重要的颜色，它会修复它

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white !important;
}

检查这个 jsfiddle http://jsfiddle.net/ENS8N/

于 2012-08-03T09:42:51.150 回答
0

它在调整你的 CSS 后对我有用，你不必添加所有额外的 CSS 引用。像这样保持简单，它在我这边工作得很好。

<style type="text/css">
li.oldTab{
    /* sets background and text color */
}

li.tab a{
    color: black;
}

li.tab{
    padding: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}
li.activeTab a{
    color: white;
}

li.activeTab{
    background: #999;
}
</style>
于 2012-08-03T09:48:24.617 回答