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>

問題は、ページが読み込まれたときにデフォルトで選択されて表示される2番目のタブを設定するにはどうすればよいですか？JavaScriptコードで「first」のすべてのインスタンスを「second」に置き換えようとしましたが、機能しません...

これは、http： //jqueryfordesigners.com/demo/tabs.htmlをおもちゃにするためのcssを備えたデモページです:)

助けてください！

4

1 に答える 1

0

最初のタブを選択しているため、変更する必要がある2つの部分があります。

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

と

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

フィルタは:first、最初に一致する要素を選択するセレクターを使用しています。:secondは有効なセレクターではありません。代わりに2番目のタブを選択するには、次のことを試してください。

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/でjQueryfilter （）メソッドを、http ：//api.jquery.com/click/でjQuery click（）メソッドを確認できます。

于 2011-05-15T20:06:10.993 に答える