Question

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

Answer 1

$(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>"); }

Answer 2

你去了 - 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）以使其正常工作。

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

2 个答案: