单击选项卡时如何更改图标？

Question

我在某些标签上遇到了一个小问题，我试图在图标上将图标更改为减号图标，如果没有，则尝试将图标更改为加号图标。

我点击它时更改为减号按钮但是当你点击另一个标签时它不会改回来。

$('ul.nav-tabs li').click(function(){
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
    $('ul.nav-tabs li:not(active)').removeClass('fa-plus').addClass('fa-minus');
});

任何帮助将不胜感激。

Answer 1

一种方法是删除所有图标上的减号，用+符号替换它们，然后将减号添加到仅被点击的li图标：

//Store as variable outside the function so we don't have to keep looking them up each
// time any of the li is clicked.
var $tabIcons = $('ul.nav-tabs li i.tabIcon');
$('ul.nav-tabs li').click(function(){

    //remove - from all icons, add +.
    $tabIcons.removeClass('fa-minus').addClass('fa-plus');

    //remove + from this tab icon, add -.
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
});

Answer 2

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/bvf9u/