Использование параметров функции javascript для отображения вкладок jquery

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;
    });
})

Рабочая Демо

Как упомянуто @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/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 4

Вы имеете в виду это? 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 5

Мой подход не использует аргументы, но HTML class и id ссылки для сокращения вещей: http://jsfiddle.net/ZScGF/1/