Question

目前我正在尝试，如果我点击选项卡它将改变颜色而不是我设置的标准颜色。我如何去做，因为我正在使用toggle（）函数。

目前我被困在这里。

$("li").click(function(){
$(this).css('background-color',"#6F0")
    })

http://jsfiddle.net/eMLTB/112

Answer 1

隐藏页面加载时的所有.tabContent元素，并在点击li时显示这些元素。

写：

JS：

$("li").click(function () {
    $($(this).find("a").attr("href")).toggle();    
    $(this).toggleClass("active");
});

CSS：

.active {
    background-color:#6F0;
}
.tabContent {
    display:none;
}

DEMO here.

Answer 2

首先，为class标记添加<li>属性，例如：

<ul id ="ta" class="nav">
    <li id="a" class="navi"><a href="#tabs-1">0</a></li>
    <li id="b" class="navi"><a href="#tabs-2">5</a></li>
    <li id="c" class="navi"><a href="#tabs-3">10</a></li>
</ul>

接下来，让你的代码像这样：

$("li").click(function(){
    $(".navi").css('background-color', "");
    $(this).css('background-color', "#6F0");
});

Answer 3

我建议使用.toogleClass()方法。

它与.toogle()类似，但更适合CSS操作。

首先在CSS中创建代表您颜色的类，然后创建该类。

http://api.jquery.com/toggleClass/

Answer 4

检查我发表评论的脚本行，我认为添加后会解决您的问题。

<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
      <li id="a"><a href="#tabs-1">0</a></li>
      <li id="b"><a href="#tabs-2">5</a></li>
      <li id="c"><a href="#tabs-3">10</a></li>
    </ul>
    <div class="tabContent" id="tabs-1" >
      <h2>Testing1</h2>
    </div>

    <div class="tabContent" id="tabs-2">
      <h2>Testing2</h2>
    </div>

    <div class="tabContent" id="tabs-3">
      <h2>Testing3</h2>
    </div>
</nav>

在你的剧本中

var i;

$("li").each(
    function(){
$(this).click(
    function(){
    i = $(this).find("a").attr("href");
        $(i).toggle();
    }
);
    }
);

$("li").click(function(){
    $('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
       $(this).css('background-color',"#6F0")
        })

单击突出显示选项卡并显示内容

4 个答案: