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

  });

fiddle

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

Answer 1

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

<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

您可以使用.toggleClass（）

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

我无法从我的地方看到你的小提琴，但你明白了。

Answer 3

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

$('.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;
});

请参阅此Fiddle

Answer 4

你做了4件事：

删除每个元素类'active_tab'
将类添加到已点击的元素
隐藏所有文章
显示与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/

Answer 5

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

$(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');
});

希望这会对你有帮助..

优化jquery添加和删除类

5 个答案: