0

我有一些 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 专家。

谢谢，

萨钦

4

2 回答 2

1

只需将activetab类添加到 中的<li>元素之一ul.tabs，如下所示：

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

你可以在这里看到它的实际效果：http: //jsfiddle.net/CAAFZ/

于 2012-05-15T13:45:10.603 回答
0

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

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

另一种方法是，在 CSS 中添加：

.tabs {display:none;}

在你的 document.ready 函数中添加

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

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

错过了 Wrock 的回复。那也可以:)

于 2012-05-15T14:00:41.127 回答