如何使這些選項卡的內容在單擊選項卡時淡入？

Question

時，沒有運氣

這裏選擇我一直在試圖讓這些選項卡的內容，以淡入的標籤

<div id="homepagetabsdiv"><ul id="homepagetabs"><li id="tab0" onclick="javascript:show_tab('0');">Main</li> 
<li id="tab1" title="Drag and drop this tab to re-arrange the order" onclick="javascript:show_tab('1');">managers</li> 
<li id="tab2" title="Drag and drop this tab to re-arrange the order" onclick="javascript:show_tab('2');">Standings</li> 
</ul></div> 
<div id="tabcontent0" class="homepagetabcontent">CONTENT</div> 
<div id="tabcontent1" class="homepagetabcontent">CONTENT</div> 
<div id="tabcontent2" class="homepagetabcontent">CONTENT</div> 

編輯添加showtab功能

function show_tab (tab_id) { 
    var done = false; 
    var counter = 0; 
    while (! done) { 
     var this_tab_content = document.getElementById("tabcontent" + counter); 
     var this_tab = document.getElementById("tab" + counter); 
     if (! this_tab_content) { 
     done = true; 
     } else { 
     if (counter == tab_id) { 
      this_tab_content.style.display = ''; 
      this_tab.className = "currenttab"; 
     } else { 
      this_tab_content.style.display = 'none'; 
      this_tab.className = ""; 
     } 
     } 
     counter++; 
    } 
    location.hash = tab_id; 
} 

Answer 1

不確保您的show_tab的功能是什麼，但它可能會需要像這樣：

function show_tab(tab_num) { 
    $(".homepagetabcontent").fadeOut(400, function() { 
     $("#tabcontent" + tab_num).fadeIn(400); 
    }); 
} 

而且，它可能更容易在HTML事件綁定悄悄地代替。所以不是所有的東西onclick="javascript:show_tab('1');"，你可以使用這個HTML格式：

<li id="tab1" title="Drag and drop this tab to re-arrange the order" data-tab-num="1">managers</li> 

並使用此Javascript：如果您決定保留內嵌onclick="javascript:show_tab('1');"東西

$(document).ready(function() { 
    $("#homepagetabs").on("click", "li", function() { 
     var $this = $(this); 
     var tab_num = $this.attr("data-tab-num"); 
     show_tab(tab_num); 
    }); 
}); 

，你不需要javascript:部分。

UPDATE：

我意識到我沒有正確處理衰落。這裏的show_tab功能我會使用和事件處理：

function show_tab(tab_num) { 
    var tabcontents = $(".homepagetabcontent"); 
    var count = 0; 
    tabcontents.fadeOut(400, function() { 
     if (++count === tabcontents.length) { 
      $("#tabcontent" + tab_num).fadeIn(400); 
     } 
    }); 
} 

$(document).ready(function() { 
    $("#homepagetabs").on("click", "li", function() { 
     var $this = $(this); 
     $("#homepagetabs").find("li").filter(".currenttab").removeClass("currenttab"); 
     $this.addClass("currenttab"); 
     var tab_num = $this.attr("data-tab-num"); 
     show_tab(tab_num); 
    }); 
}); 

而且還在，HTML結構我會使用：

<div id="homepagetabsdiv"> 
    <ul id="homepagetabs"> 
     <li id="tab0" title="Drag and drop this tab to re-arrange the order" data-tab-num="0">Main</li> 
     <li id="tab1" title="Drag and drop this tab to re-arrange the order" data-tab-num="1">managers</li> 
     <li id="tab2" title="Drag and drop this tab to re-arrange the order" data-tab-num="2">Standings</li> 
    </ul> 
</div> 

<div id="tabcontents"> 
    <div id="tabcontent0" class="homepagetabcontent">CONTENT0</div> 
    <div id="tabcontent1" class="homepagetabcontent">CONTENT1</div> 
    <div id="tabcontent2" class="homepagetabcontent">CONTENT2</div> 
</div> 

DEMO：http://jsfiddle.net/SLBjv/5/

顯然你是歡迎向您需要的show_tab函數添加其他任何內容，但如果您使用的是jQuery，那麼您可以隨時隨地使用它。這意味着使用它來選擇/查找元素，更改class es，以及更改樣式等等。