Question

我有一些html和JQuery用于创建带有标签内容的页面。 html如下：

<section id="content" class="content">
    <ul class="tabs group">
         <li><a href="#">Tab 1</a></li>
         <li><a href="#">Tab 2</a></li>
         <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="panes">
         <div class="group">
              tab1
         </div>         
         <div class="group">
              tab2
         </div>         
         <div class="group">
              tab3
         </div>   
    </div>
</section>

JQuery在这里：

<script type="text/javascript">
        $(document).ready(function () {        
            $('.activetab a').each(function () {
                var activeTab = $(this).parents('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
            });

            $('.tabs a').click(function () {           
                $(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); var activeTab = $(this).parent('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
                return false;
            });
        });
    </script>

此代码的工作原理是，当我单击其中一个链接时，将显示正确选项卡中的数据。

唯一的问题是，当我第一次访问页面（包含这些选项卡）时，我会从显示给我的所有选项卡中获取数据。我需要在文档就绪函数中添加一些额外的代码来显示第一个选项卡中的数据并隐藏所有其他数据（当然也要突出显示第一个选项卡）。任何想法我怎么可能这样做。我不是JQuery / JavaScript专家。

谢谢，

萨钦

Answer 1

只需将activetab课程添加到<li>内的ul.tabs元素之一，就像这样：

<li class="activetab"><a href="#">Tab 1</a></li>

您可以在此处查看：[{3}}

Answer 2

好吧，如果没有任何具体原因，您可以使用JQuery UI的选项卡来实现此功能。

查看时间： http://jqueryui.com/demos/tabs/

其他方法是在CSS中添加：

.tabs {display:none;}

在你的document.ready function add

中

$('.tabs').show();

这样，在样式设置良好之前，最终用户看不到丑陋的显示。

错过了Wrock的回复。这也应该有效：）

JQuery Tabbing问题

2 个答案: