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

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 中相比，以不显眼的方式绑定(bind)事件可能更容易。因此，您可以使用这种 HTML 格式，而不是所有的 onclick="javascript:show_tab('1');" 内容:

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

并使用这个 Javascript:

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

如果您决定保留内联 onclick="javascript:show_tab('1');" 内容，则不需要 javascript: 部分。

更新:

我意识到我没有正确处理褪色。这是我要使用的 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>

演示: http://jsfiddle.net/SLBjv/5/

显然欢迎您向您的 show_tab 函数中添加您需要的任何其他内容，但是如果您使用的是 jQuery，则最好尽可能地使用它。这意味着使用它来选择/查找元素、更改 classes 和更改样式等等。