0

单击相应的选项卡时，我很难显示选项卡内容。这是我的代码，但它无法按照我的要求工作。当我单击 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>
4

2 回答 2

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

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

或者

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

然后使用“.ui-widget-content”显示选项卡内容

for (i=0;i<mytabs.length;i++)
{
     $(".ui-widget-content").append("<br>"+mytabs[i]+"<br>");
}
于 2013-08-22T10:06:33.867 回答
0

给你 - 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）才能使其工作。

于 2013-08-22T10:08:40.590 回答