與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褪色標籤

回答

相關問題