如何使这些选项卡的内容在单击选项卡时淡入？

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，以及更改样式等等。