javascript - removeclass addclass 多个选择器

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 9 年前。

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

<小时/>

您需要稍微更改一下此处的顺序，以便在为 anchor 添加类 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