0

我有两个选项卡 TAB 1 和 TAB 2。现在我想在每次加载页面时默认显示 TAB 1。我该怎么做？我正在使用 jquery Mobile 开发移动应用程序。

<script type="text/javascript">
    $('div[data-role="navbar"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('div#' + $(this).attr('data-href')).show();
    });
    </script>

    <div data-role="navbar">
        <ul>
                <li><a href="#" data-href="a" class="tabbs " >TAB 1</a></li>
                <li><a href="#" data-href="b" class="tabbs" >TAB 2</a></li>
        </ul>
        </div><!-- /navbar -->
    <div id="a" class="content_div"> </div>
    <div id="b" class="content_div" > </div>

提前谢谢！！！

4

3 回答 3

0

使用$(window).load() 给ul一个id。然后使用该id找到第一个孩子并用它添加类。它会很好地工作。

$(window).load(function{
$('UL_ID li: first-child').addClass('class_Name');
});
于 2013-01-21T07:26:24.447 回答
0

您可以将类添加到第一个元素以使其在 doucment.ready 上处于活动状态。您还必须在单击事件中取消选择先前选择的选项卡。

现场演示 

<script type="text/javascript">
    prevTab = $('div[data-role="navbar"] a');    
    prevTab.eq(0).addClass('ui-btn-active'); //Selects first tab.

     $('div[data-role="navbar"] a').live('click', function () {
       prevTab.removeClass('ui-btn-active'); 
       $(this).addClass('ui-btn-active');
       $('div.content_div').hide();
       $('div#' + $(this).attr('data-href')).show();
       prevTab = $(this);
     });

</script>
于 2013-01-21T06:47:00.340 回答
0

为什么不直接将ui-btn-active类添加到 HTML 中的第一个选项卡和另一个类以显示内容 div？

看到这个小提琴： http: //jsfiddle.net/YEqBh/1/（也编辑了jQuery）（哎呀更新链接）

于 2013-01-21T06:50:17.900 回答