与Jquery褪色标签

我目前正在使用此功能添加和删除显示和隐藏我的标签完美的类。我想细说了这样的内容淡入...与Jquery褪色标签

这里是我的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'); 
});

和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; 
}

来源

2010-12-07 Andy

我假设`$ tabs`包含所有`li`元素？ – Stephen 2010-12-07 19:03:14

$（this）.next（）。fadeIn（''） – 2010-12-07 19:05:21

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

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

来源

2010-12-07 19:02:48

不幸的是，除了我的代码之外，其他任何事情都不做:( – Andy 2010-12-07 19:10:18

如果您删除/禁用`.current .tabInfo`样式规则，他的代码应该可以工作。 – 2010-12-07 19:29:57

这种取决于你的CSS看起来如何，但这可能工作。

来源

2010-12-07 19:02:48

可以通过加载了jQuery UI库，并添加第二个参数给你addClass invokation，动画的时间做到这一点。

$('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。

来源

2010-12-07 19:04:15

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

来源

2010-12-07 19:06:54

不需要向父级添加类电流，您需要淡入适当的tabInfo。

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

来源

2010-12-08 18:31:45 mVChr

与Jquery褪色标签

回答

相关问题