jQuery将类添加到活动选项卡

Question

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

    链接1     链接2     链接3     链接4     链接5

<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/Wqc9N/6/

它工作得很好，我现在想要做的是为任何一个活动标签添加一个类，以便我可以设置它的样式。有没有人有一个我可以看看尝试并应用于我的代码的例子？

Answer 1

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

      $(".link").removeClass( 'active' );
      $( this ).addClass( 'active' );

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

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

      $(".link").removeClass( 'active' );
      $( this ).addClass( 'active' );

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

在评论中编辑每个后续问题：

如果您想让父容器处于活动状态，只需使用jQuery的父（）。

例如：

$( function() {
    $( '.link' ).on( 'click', function() {
        var $parent = $( this ).parent();

        if( $parent.hasClass( 'active' ) ) {
            return;
        }

        // Could use parents() here instead of closest if you are not in a nest li...
        $( '.link' ).closest( 'li' ).removeClass( 'active' );
        $parent.addClass( 'active' );

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

Answer 2

您可以使用.addClass()和.removeClass()：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="#" data-rel="content1">Link 1</a>

<a class="link" href="#" data-rel="content2">Link 2</a>

<a class="link" href="#" data-rel="content3">Link 3</a>

<a class="link" href="#" data-rel="content4">Link 4</a>

<a class="link" href="#" data-rel="content5">Link 5</a>

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以

＆＃13;

＆＃13;

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

  //if all link elements are siblings
  $(this).addClass('active').siblings('.active').removeClass('active');
  //else
  //$links.not(this).removeClass('active');
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

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

＆＃13;

＆＃13;

＆＃13;