1

我一直试图让这些选项卡的内容在没有运气的情况下淡入

这是标签

<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;
}
4

1 回答 1

2

不确定您的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：

$(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 和更改样式等等。

于 2013-04-08T00:55:30.563 回答