Question

我目前正在使用此功能添加和删除显示和隐藏我的标签的类。我想详细说明这一点，所以内容淡出......

这是我的HTML

<ul id='tabs'>
    <li class='current'>
        <a class='tabLink' href='#'>Title</a>
        <div class='tabInfo'>
            <p>Text Description</p>
        </div>
    </li>
    <li>
        <a class='tabLink' href='#'>Title</a>
        <div class='tabInfo'>
            <p>Text Description</p>
        </div>
    </li>
</ul>

我的JS

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
});

AND CSS

#tabs {
    clear: both;
    position: relative;
}
a.tabLink {
    color: #58585A;
    display: block;
    font-size: 13px;
    padding: 3px 5px;
}
a.tabLink:hover {
    color: #FFFFFF;
}
.tabInfo {
    background: none repeat scroll 0 0 #000000;
    color: #CCCCCC;
    display: none;
    font-size: 12px;
    height: 176px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
}
.current .tabLink {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
}
.current .tabInfo {
    display: block;
}

Answer 1

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
    $(this).parent().find('.tabInfo').fadeIn();
});

如果我理解正确，你想淡化内容。如果内容被隐藏，它会出现，使用tabInfo div上的fadeIn（）是合适的。

Answer 2

这取决于你的CSS外观，但这可能有用。

$('a.tabLink').click(function(){
      $(".tabInfo", $tabs)
        .stop().fadeOut("slow", function() { //Fadeout old content
          $tabs.removeClass('current');
          $(this).parent().addClass('current');
          $(this).next(".tabLink").fadeIn();
      });
});

Answer 3

您可以通过加载jQuery UI库并在addClass调用中添加第二个参数（动画的持续时间）来实现此目的。

$('a.tabLink').click(function(){
    // the style effects will be applied over a period of one second
    $tabs.removeClass('current',1000);
    $(this).parent().addClass('current',1000);
});

另请参阅：jQuery UI文档的the addClass page。

Answer 4

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
    $(this).next().fadeIn()
});

Answer 5

您需要淡入相应的tabInfo，而不是将类current添加到父级。

$('a.tabLink').click(function(e){
  $('.tabInfo').css('display','none');
  $(this).parent().find('.tabInfo').fadeIn();
});

使用Jquery淡化选项卡

5 个答案: