Question

其实我正在尝试做jquery标签。我编写了一个需要返工的代码，可能还有更好的实现方法。我想我可以使用函数参数来实现这一点，但我不确定。有人可以告诉我如何以更好的方式实现这一目标。虽然我的代码有效，但我认为它很简陋。我还希望只有一个标签显示背景颜色，如果它是活动的。

http://jsfiddle.net/5nB4P/

HTML：

<div id="nav">
    <ul>
        <li><a href="#">First Tab</a></li>
        <li><a href="#">Second Tab</a></li>
        <li><a href="#">Third Tab</a></li>
    </ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>

脚本：

$(function() {
    $("li :eq(0)").click(function() {
            $("li").css("background","none");
            $(this).css("background","red");
            $(".tabs:gt(0)").hide();
            $(".tabs:eq(0)").show();
    })
    $("li :eq(1)").click(function() {
    $("li").css("background","none");
            $(this).css("background","red");
    $(this).css("background","red")
            $(".tabs:gt(1), .tabs:lt(1)").hide();
            $(".tabs:eq(1)").show();
    })
    $("li :eq(2)").click(function() {
    $("li").css("background","none");
            $(this).css("background","red");
            $(".tabs:lt(2)").hide();
            $(".tabs:eq(2)").show();
    })
})

Answer 1

有一种更好的方法来实现这一目标。你去吧

$(function() {
    $("li").click(function() {
       $(this).css("background","red").siblings().css("background","none");
       $(".tabs").hide().eq($(this).index()).show();
       return false;
    });
})

正在使用 Demo

正如@Niels提到的设置背景样式，您可以拥有一个专用类（活动）并添加/删除此类而不是设置内联样式。

FYI ..在上面的代码中$(this).index()给出了jQuery对象中第一个元素相对于其兄弟元素的位置

Answer 2

CSS：

.active {
    background-color:red;
}

JQuery：

$('li').click(function(){
    $this = $(this);
    $this.addClass('active').siblings().removeClass('active');
    $('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});

以下是演示：http://jsfiddle.net/5nB4P/6/

Answer 3

你是说这个意思吗？ http://jsfiddle.net/tsukasa1989/5nB4P/1/

$(function() {
    $("#nav li").click(function(){
         // Handle active status
         $(this).addClass("active").siblings().removeClass("active");

        // Show the tab at the index of the LI
        $(".tabs").hide().eq($(this).index()).show();        
    })
    // Don't forget to set first tab as active one at start
    .eq(0).addClass("active");
})

如果要设置活动标签的样式，请使用

#nav li.active{}

Answer 4

以下是我更新此内容以使其更小的方式，我相信它更有效，更易于使用：

http://jsfiddle.net/5nB4P/7/

代码：

$("#nav ul li").click(function(){
    var id = $(this).attr("rel");
    $("#nav ul li").each(function(){
        $(this).removeClass("active");
    });
    $(this).addClass("active");
    $("#content div").each(function(){
        $(this).hide();
    });
    $("#"+id).show();
});

Answer 5

我的方法不使用参数，但HTML class和id引用缩短了内容：http://jsfiddle.net/ZScGF/1/

使用javascript函数参数显示jquery选项卡

5 个答案: