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

}

更新：

HTML MARKUP：

    <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">

请注意，每个link元素与每个内容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代码。

注意：我使用术语“标签”和“窗格”，但您可以使用任何您想要的内容。

removeclass addclass multiple selectorors

2 个答案: