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。因此，您可以使用此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>

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

显然，欢迎您向您需要的show_tab函数添加任何其他内容，但如果您正在使用jQuery，那么您可以随时随地使用它。这意味着使用它来选择/查找元素，更改class es，以及更改样式等。

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

1 个答案: