Question

我有这个jQuery在点击div时显示内容......

<ul>
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li>
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li>
</ul>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
</div>

$(".link").click(function() {
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

http://jsfiddle.net/mjj70qjk/

它工作得很好，我现在要做的是为li添加一个类，无论哪个选项卡处于活动状态，这样我就可以设置它。我有这个......

        jQuery(document).ready(function() {
 jQuery( function() {
    jQuery(".link").click(function() {
      if( jQuery( this ).hasClass( 'active' ) ) {
         return;
      }

      jQuery(".link").removeClass( 'active' );
      jQuery( this.parentNode ).addClass( 'active' );

      jQuery('.content-container div').fadeOut('slow');
      jQuery('#' + jQuery(this).data('rel')).fadeIn('slow');
  });
});
});

哪个有效，但它没有删除课程，我哪里错了？

Answer 1

您需要从其父

中删除该类

//no need to have $(document).ready(fn) and $(fn), they are the same
jQuery(function ($) {
  var $links = $(".link").click(function () {
    if ($(this).hasClass('active')) {
      return;
    }

    $links.parent().removeClass('active');
    $(this.parentNode).addClass('active');

    $('.content-container div').fadeOut('slow');
    $('#' + jQuery(this).data('rel')).fadeIn('slow');
  });
});

.content-container {
  position: relative;
  width: 400px;
  height: 400px;
}
.content-container div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.active .link {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li>
  <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li>
  <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li>
  <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li>
  <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li>
</ul>

<div class="content-container">
  <div id="content1">This is the test content for part 1</div>
  <div id="content2">This is the test content for part 2</div>
  <div id="content3">This is the test content for part 3</div>
  <div id="content4">This is the test content for part 4</div>
  <div id="content5">This is the test content for part 5</div>
</div>

Answer 2

添加以下行：

jQuery('.active').removeClass('active');

而不是：

jQuery(".link").removeClass( 'active' );

Answer 3

您正在从.link

中删除课程

 jQuery(".link").removeClass( 'active' );

但您要将类添加到其父级

 jQuery( this.parentNode ).addClass( 'active' );

Answer 4

将this.parentNode更改为this。这就是我在你的例子中所做的，我认为这是你需要的结果。

http://jsfiddle.net/mjj70qjk/2/

jQuery将类添加到活动选项卡父元素

4 个答案: