jquery - 优化jquery增删类

Question

某处必须有解决方案，但我无法理解。我的问题很简单，但不知道如何优化它。

我有简单的标签导航代码（查看内容）

$(function(){
    $('#tab_o_nas article').hide();
    $('#tab-1').show();
    $('#opcja-1').addClass('active_tab');

    $('#opcja-1').click(function(){
        $(this).addClass('active_tab');
        $('#opcja-2').removeClass('active_tab');
        $('#opcja-3').removeClass('active_tab');
        $('#opcja-4').removeClass('active_tab');
        $('#tab_o_nas article').hide();
        $('#tab-1').show();
        return false;
    });

    $('#opcja-2').click(function(){
        $(this).addClass('active_tab');
        $('#opcja-1').removeClass('active_tab');
        $('#opcja-3').removeClass('active_tab');
        $('#opcja-4').removeClass('active_tab');
        $('#tab_o_nas article').hide();
        $('#tab-2').show();
        return false;
    });

    $('#opcja-3').click(function(){
        $(this).addClass('active_tab');
        $('#opcja-1').removeClass('active_tab');
        $('#opcja-2').removeClass('active_tab');
        $('#opcja-4').removeClass('active_tab');
        $('#tab_o_nas article').hide();
        $('#tab-3').show();
        return false;
    });

    $('#opcja-4').click(function(){
        $(this).addClass('active_tab');
        $('#opcja-1').removeClass('active_tab');
        $('#opcja-2').removeClass('active_tab');
        $('#opcja-3').removeClass('active_tab');
        $('#tab_o_nas article').hide();
        $('#tab-4').show();
        return false;
    });

  });

小提琴

有没有其他方法可以优化这个 addClass 和 removeClass？获得更短的代码？

Answer 1

首先，您应该修复导航有序列表的标记（锚点应该在<li>s 内，而不是相反）：

<ol id="nav_o_nas">
        <li id="opcja-1"><a href="#">tab 1</a></li>
        <li id="opcja-2"><a href="#">tab 2</a></li>
        <li id="opcja-3"><a href="#">tab 3</a></li>
        <li id="opcja-4"><a href="#">tab 4</a></li>
</ol>

然后，您可以将一个简单的活页夹添加到列表中，它代表锚点，找到单击的项目的索引，并适当地切换类和文章：

$('#nav_o_nas').on('click', 'a', function(e) {
    e.preventDefault(); // should be used instead of return false;

    // get the index of the clicked link (0-3)    
    var index = $('#nav_o_nas a').index(this);

    // select all list items, remove the class, target the correct link, add the class    
    $('#nav_o_nas li').removeClass('active_tab').eq(index).addClass('active_tab');
    // hide all articles, show the correct article
    $('article').hide().eq(index).show();
});

看到它在这里工作http://jsfiddle.net/4AYMs/2/

Answer 2

这是完整的较短代码，如演示

$(document).ready(function() {

$('#nav_o_nas li').click(function(){
     $('#nav_o_nas li').removeClass('active_tab');
        $(this).addClass('active_tab');
        var this_id = $(this).attr('id');

        var arry = this_id.split("-"); 

        $('#tab_o_nas article').hide();
        $('#tab-'+arry[1]).show();

 });

$('#tab_o_nas article').hide();
$('#tab-1').show();
$('#opcja-1').addClass('active_tab');
});

希望对你有帮助..

Answer 3

您可以使用 .toggleClass()

$('.btn').toggleClass('active');

我无法从我的地方自动取款机查看你的小提琴，但你明白了。

Answer 4

您需要在标记中添加一些类。然后你可以这样做：

$('.tab-class').click(function() {

    // removes all active_tab classes
    $('.tab-class').removeClass('active_tab');

    // adds the active_tab class to the current element
    $(this).addClass('active_tab');

    // hides your articles (another class is recommended)
    $('article').hide();

    // get the number of the clicked item from its id via replace
    var nr = $(this).attr('id').replace('opcja-', '');

    // shows related tab with the number of the clicked li 
    $('#tab-' + nr).show();

    return false;
});

看到这个小提琴

Answer 5

你做 4 件事：

1. 删除每个元素类“active_tab”
2. 将类添加到单击的元素
3. 隐藏所有文章
4. 显示与 opcja 编号相同的文章

所以它非常通用，你可以用 1 个函数来做，而不是 4 个函数：

$(function () {
    $('#tab_o_nas article').hide();
    $('#tab-1').show();
    $('#opcja-1').addClass('active_tab');

    var links = $('#nav_o_nas li');

    links.click(function () {
        var $this = $(this),
            selOption = $this.attr('id'),
            selNumber = (selOption.split('-'))[1];

        links.removeClass('active_tab');
        $this.addClass('active_tab');
        $('#tab_o_nas article').hide();
        $('#tab-'+selNumber).show();
        return false;
    });

});

我还稍微更改了您的 html。

http://jsfiddle.net/mattydsw/4AYMs/3/