优化jquery添加和删除类

必须有解决方案的地方，但我不明白。我的问题很简单，但不知道如何优化它。优化jquery添加和删除类

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

$(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？要得到更短的代码？

来源

2013-07-11 Borys Rybak

使用'$（本）'，并为每个标签 –

停止类（错误）使用返回False http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ –

首先，你应该修正您的导航有序列表的标记（锚应该是<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/

来源

2013-07-11 11:40:15 Luke

非常感谢其他解决方案，但这段代码在我看来是最合适的:) 非常感谢！ –

您可以使用.toggleClass（）

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

我无法从我的地方大气压查看您的小提琴，但你的想法。

来源

2013-07-11 11:26:42 Eric

你需要添加一些类到你的标记。然后，你可以这样做：

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

来源

2013-07-11 11:35:45

你做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/

来源

2013-07-11 11:41:57 mkutyba

这完全是短代码就像在演示

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

希望这将帮助你..

来源

2013-07-11 11:45:03

优化jquery添加和删除类

回答

相关问题