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

Question

我有一个菜单栏和选项卡，代码如下：

    <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>

Answer 1

现在您终于提供了足够的信息，可以更轻松地帮助您...

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

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

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

---

Alternatively, if you plan on adding more a elements into your #menu, you should add IDs to either the a elements or the ul, like in this demo: http://jsfiddle.net/LdDGG/1/

Answer 2

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

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

同样来自文档：

[如何]...从文本链接中选择选项卡
而不是单击选项卡本身

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/

Answer 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
});