Question

我有两个Tabs 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>

Thanx提前!!!

Answer 1

您可以将类添加到第一个元素，以使其在document.ready上处于活动状态。您还必须在点击事件中取消选择之前选择的标签。

Live Demo

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

Answer 2

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

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

Answer 3

使用$(window).load() 给ul ID 。然后使用 id 找到第一个子节点并添加它的类..它将很好地工作。

$(window).load(function{
$('UL_ID li: first-child').addClass('class_Name');
});

如何默认显示1st TAB Active？

3 个答案: