jquery：如何将菜单栏链接到选项卡

Posted 2023-02-16

【中文标题】jquery：如何将菜单栏链接到选项卡

【英文标题】：jquery:how linking the menubar to tabs

【发布时间】：2010-07-15 08:57:51

【问题描述】：

我有一个菜单栏和标签，如下所示：

    <div id="menu">
        <ul>
            <li><a href="#"><span>Inspection</span></a></li>
            <ul>
                <li><a href="#"><span>show tabs1</span></a></li>
                <li><a href="#"><span>show tabs2</span></a></li>
            </ul>
        </ul>
    </div>    

    <div id="tabs">
          <ul>
               <li><a href="#tabs1">Inspection Report</a></li>
               <li><a href="#tabs2">Input Data</a></li>
          </ul>
      <div id="tabs1">
           bla bla bla
      </div>
      <div id="tabs2">
           blah blah blah
      </div>
   </div>

我已将以下代码用于选定的选项卡。 但是在我点击show tabs1之后，实际显示tabs2：

<script>
      $(document).ready(function()
              $("#Tabs").tabs();
              $("#menu ul li a").each(function(index)
                        $(this).click(function()
                                  $("#Tabs").tabs("select",index);
                                  );
                         );
             );
</script>

【问题讨论】：

你能说得具体一点吗？

我一直在改变我的问题..

【参考方案1】：

既然你终于提供了足够的信息，那就更容易帮助你了……

将你的 javascript 编辑为以下内容，它仍然使用 jQuery 选项卡的 select 方法

$(function() 
    $("#tabs").tabs();
    $("#menu a:not(:first)").each(function(index)
        $(this).click(function() 
            $("#tabs").tabs("select",index);
            return false;
        );
    );
);

演示：http://jsfiddle.net/LdDGG

---

或者，如果您计划将更多 a 元素添加到您的 #menu，您应该将 ID 添加到 a 元素或 ul，就像在这个演示中一样：http://jsfiddle.net/LdDGG/1/

【参考方案2】：

您的问题不是很清楚，但也许 select 方法是您正在寻找的。 它执行以下操作：

选择一个选项卡，就像单击它一样。 第二个参数是从零开始的 要选择的选项卡的索引或 选项卡所在面板的 id 选择器 与（标签的 href 片段标识符，例如哈希，点 到面板的 id)。

同样来自documentation：

[我如何]...从文本链接中选择一个选项卡 而不是点击标签本身

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function()  // bind click event to link
        $tabs.tabs('select', 2); // switch to third tab
        return false;
);

这是一个如何工作的演示：http://jsfiddle.net/hP9xb/

【讨论】：

不..我只是问...我可以在菜单栏选择后直接打开第二个标签

当你这样做时会发生什么（在菜单栏选择）？你能在jsfiddle 或类似网站上放一个演示吗？不是很清楚你想要什么

好吧，您将我的代码粘贴到您的问题中。你真的什么都没做。您想要什么以及您的页面是如何构建的还不清楚

【参考方案3】：

我们将您的菜单称为“标签控制台”，将您的主容器称为“标签窗格”。

假设您的选项卡控制台的 html 如下所示：

<ul id="tab_console">
    <li id="first"><a href="#">My First Page</a></li>
    <li id="second"><a href="#">My Second Page</a></li>
    <li id="third"><a href="#">My Third Page</a></li>
</ul>

...你的标签面板看起来像这样：

<div id="tab_pane">
    <div id="page_first"></div>
    <div id="page_second"></div>
    <div id="page_this"></div>
</div>

您需要隐藏各种选项卡窗格的内容，这样它们就不会一次全部显示出来。你可以用 CSS 做到这一点：

#tab_pane div display: none;

现在我们需要一个脚本来完成所有工作：

$(document).ready(function()                    // fires when browser loads your html
    $('#tab_console > li').click(function()     // fires when a tab is clicked
        $('#tab_pane > div').hide();             // hides all tab contents
        $('#tab_pane > #page_' + $(this).attr('id')).show();   // show the selected tab
    );

    $('#tab_pane > li#page_first').show();     // load your default tab
);