removeclass addclass多选择器

Question

我已经写了一个可以正常工作的函数，但是对于jquery而言是新手，我想知道是否有更简洁的书写方式。任何建议都可以帮助，只是想学习！

谢谢！

CODE：

function displayContent() { 
    var $link1 = $('.row.nav li a.bio'); 
    var $link2 = $('.row.nav li a.stylist'); 
    var $link3 = $('.row.nav li a.contact'); 
    var $content = $('#text-content') 
    var $bio = $("#bio"); 
    var $stylist = $("#stylist"); 
    var $contact = $("#contact"); 
    var $overlay = $('.content-overlay'); 

    //link1 
    $link1.click(function (e) { 
    e.stopPropagation(); 
    $link2.removeClass('active'); 
    $link3.removeClass('active'); 
    $link1.addClass('active'); 
    $contact.hide(); 
    $stylist.hide(); 
    $bio.fadeIn(700); 
    $overlay.show(); 
    }); 
    //link2 
    $link2.click(function (e) { 
    //same code here 
    }); 
    //link3 
    $link3.click(function (e) { 
    //same code here 
    }); 


    //close overlay/hide content 
    $('html').click(function (e) { 
    e.stopPropagation(); 
    $link1.removeClass('active'); 
    $link2.removeClass('active'); 
    $link3.removeClass('active'); 
    $bio.fadeOut(); 
    $stylist.fadeOut(); 
    $overlay.fadeOut(); 
    $contact.fadeOut(); 
    }); 

} 

UPDATE：

HTML标记：

<div class="main-nav pull-left"> 
    <ul class="row nav"> 
    <li><a href="#" class="bio">bio</a></li> 
    <li><a href="#" class="stylist">stylist</a></li> 
    <li><a href="#" class="contact">contact</a></li> 
    </ul> 
</div> 
    <section id="text-content"> 
    <div class="row"> 
    <div id="bio" style="display: none;"> 
content here 
</div> 
    <div id="stylist" style="display: none;"> 
content here 
</div> 
    <div id="contact" style="display: none;"> 
content here 
</div> 
</section> 

Answer 1

事情是这样的：

$('.row.nav li a').click(function(e) { 
    e.stopPropagation(); 
    $('.row.nav li a').removeClass('active'); 
    $(this).addClass('active'); 
    var cls = $(this).prop('class'); 
    $('#' + cls).fadeIn(700).siblings('div').hide(); 
    $('.content-overlay').show(); 
}); 

$('html').click(function() { 
    $('.row.nav li a').removeClass('active'); 
    $("#bio, #stylist, #contact, .content-overlay").fadeOut(); 
}); 

---

你需要改变在这里添加active上课前为你的锚，其获取类的顺序一点点：

$('.row.nav li a').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var cls = $(this).prop('class'); 
    $('#' + cls).fadeIn(700).siblings('div').hide(); 
    $('.content-overlay').show(); 
    $('.row.nav li a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$('html').click(function() { 
    $('.row.nav li a').removeClass('active'); 
    $("#bio, #stylist, #contact, .content-overlay").fadeOut(); 
}); 

Fiddle Demo

Answer 2

如果你的HTML是目前这样的：

<a class="bio"> 
<a class="contact"> 
<a class="stylist"> 

<div id="#bio"> 
<div id="#contact"> 
<div id="#stylist"> 

您可以将其更改为：

<a class="tab" data-pane="#bio"> 
<a class="tab" data-pane="#contact"> 
<a class="tab" data-pane="#stylist"> 

<div class="pane" id="#bio"> 
<div class="pane" id="#contact"> 
<div class="pane" id="#stylist"> 

请注意，每个链接元素都具有相同的类，每个内容div也是如此。此外，每个链接都有一个data-属性，将其与内容div绑定。

然后代码可以是这样的：

var $tabs = $('.tab'), 
    $panes = $('.pane'), 
    $overlay = $('.content-overlay'); 

$tabs.click(function(e) { 
    e.stopPropagation(); 
    var $tab = $(this); 
    $tabs.removeClass('active'); 
    $tab.addClass('active'); 
    $panes.hide(); 
    $($tab.attr('data-pane')).fadeIn(700); 
    $overlay.show(); 
}); 

$(document.body).click(function(e) { 
    e.stopPropagation(); 
    $tabs.removeClass('active'); 
    $panes.fadeOut(); 
    $overlay.fadeOut(); 
}); 

通过上面的代码，你可以添加更多的窗格和更多的标签，并没有改变的JavaScript代码。

注：我使用的术语“选项卡”和“窗格”，但你可以使用任何你想要的。