远程加载项类多选择器

Question

我编写了一个运行良好的函数，但作为jquery的新手，我想知道是否有一种更简洁的方式来编写它。任何建议都会有帮助，只是试着学习！

谢谢!

代码：

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

}

更新：

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

小提琴演示

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

注意:我使用了“选项卡”和“窗格”这两个术语，但你可以随意使用。