0

我正在为一个项目使用http://jqueryfordesigners.com/jquery-tabs/，标签 javascript 代码如下所示：

<script type="text/javascript" charset="utf-8">
            $(function () {
                    var tabContainers = $('div.tabs > div');
                    tabContainers.hide().filter(':first').show();

                    $('div.tabs ul.tabNavigation a').click(function () {
                            tabContainers.hide();
                            tabContainers.filter(this.hash).show();
                            $('div.tabs ul.tabNavigation a').removeClass('selected');
                            $(this).addClass('selected');
                            return false;
                    }).filter(':first').click();
            });
    </script>

标签 html 看起来像这样：

<div class="tabs">
    <ul class="tabNavigation">
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
    </ul>

    <div id="first">
        <h2>First</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="second">

        <h2>Second</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
    <div id="third">
        <h2>Third</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

问题是：如何设置在页面加载时默认选择和显示的第二个选项卡？我试图用javascript代码中的“second”替换所有“first”实例，但它不起作用......

这是一个使用 css 完成的演示页面，供您玩弄 http://jqueryfordesigners.com/demo/tabs.html :)

请帮忙！

4

1 回答 1

0

有两个部分正在选择第一个选项卡，因此需要更改：

tabContainers.hide().filter(':first').show();

和

.filter(':first').click();

过滤器使用:first，一个选择第一个匹配元素的选择器。:second不是有效的选择器。要改为选择第二个选项卡，请尝试以下操作：

var tabContainers = $('div.tabs > div');
tabContainers.hide(); // don't need to show a tab here; it'll be shown below

$('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    $('div.tabs ul.tabNavigation a').removeClass('selected');
    $(this).addClass('selected');
    return false;
}).filter('[href="#second"]').click(); // click second link, based on href attr

这可以进一步清理，但希望它能让你开始。您可以在http://api.jquery.com/filter/阅读 jQuery filter() 方法和在http://api.jquery.com/click/阅读jQuery click() 方法。

于 2011-05-15T20:06:10.993 回答