我希望根据使用jquery单击的选项卡来显示选项卡内容

I want the tab-contents to be displayed according to the tab being clicked using jquery

本文关键字：选项 显示 单击 jquery 我希望      更新时间：2023-09-26

当单击相应的选项卡时，我很难显示选项卡内容。这是我的代码，但它不能按照我的要求工作。当我单击Eat选项卡时，数组的所有值都在重复。请帮帮我！！

<script>

  $(function() {
          $("#tabbable").tabs();
         }); 
    var i;
    var mytabs = new Array();
    mytabs[0] = "Saab";
    mytabs[1] = "Volvo";
    mytabs[2] = "BMW";
    </script>
    <body>
    <div class="row-fluid">
            <div class="span1 offset1">
                <div class="tabbable" align="center">
                    <ul class="nav nav-tabs nav-stacked">

          <li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a></li>
          <li><a href="#tabs-2">Drink</a></li>
        </ul>
      </div>  
    </div>
    <div id="1"></div>
    </div>
    <script type="text/javascript">
    $("a[href=#tabs-1]").click(function()
            {
          for (i=0;i<mytabs.length;i++)
            {
              $('div').append("<br>"+mytabs[i]+"<br>");
        }
        });</script>
    </body>

给你-http://jsfiddle.net/uZRPd/

HTML

<div id="tabs">
    <ul>
        <li><a href="#saab">Saab</a></li>
        <li><a href="#volvo">Volvo</a></li>
        <li><a href="#bmw">BMW</a></li>
    </ul>
    <div id="saab">
        <p>Content for Saab</p>
    </div>
    <div id="volvo">
        <p>Content for Volvo</p>
    </div>
    <div id="bmw">
        <p>Content for BMW</p>
    </div>
</div>

JavaScript

$("#tabs").tabs();

请注意，除了Jquery之外，还需要包含Jquery UI（CSS和JS）才能使其工作。

$(function() {
    $(".tabbable").tabs();
});

不$("#tabbable").tabs();

或

<div id="tabbable" class="tabbable" align="center">

然后使用".ui窗口小部件内容"显示选项卡内容

for (i=0;i<mytabs.length;i++)
{
     $(".ui-widget-content").append("<br>"+mytabs[i]+"<br>");
}
相关文章：