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代碼。

注：我使用的術語「選項卡」和「窗格」，但你可以使用任何你想要的。