1

要求に応じて jsfiddle.net リンクを追加するように編集された質問。申し訳ありません。リンクは次のとおりです。http://jsfiddle.net/AuQL3/

次のような関数があります。

$(document).ready(function() {
    $('.innertabs2 > div').hide();
    $('.innertabs2 div:first').show();
    $('.innertabs2 ul.inner-tab-nav2 li:first').addClass('active');
    $('.innertabs2 ul.inner-tab-nav2 li a').click(function() {
        $('.innertabs2 ul.inner-tab-nav2 li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.innertabs2 > div').hide();
        $(currentTab).fadeIn(400).show();
        //$(currentTab).show();
        return false;
    });
});​

特に「.innertabs」および「.inner-tab-nav」セレクターの数字 2 に注意してください。毎回新しい関数を手動で作成するのではなく、ページで複数回再利用できるように、この関数をより拡張可能にする適切な方法は何ですか?

これは、私が使用している HTML の簡略化されたバージョンです。

<div class="tabs"><!--begin tab container-->

<ul class="tab-nav">
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
</ul>

<div id="MenuContent"><!-- begin main tab's content-->

        <div class="innertabs2"><!--begin subtab set 1 (need to autoincrement number)-->

            <ul class="inner-tab-nav2">
                <li><a href="#submenu1">Submenu 1</a></li>
                <li><a href="#submenu2">Submenu 2</a></li>
                <li><a href="#submenu3">Submenu 3</a></li>
            </ul>

            <div id="submenu1"><!--begin tab 1-->                   

                {{CONTENT}}

            </div><!--end tab 1-->

            <div id="submenu2"><!--begin tab 2-->

                {{CONTENT}}

            </div><!--end tab 2-->

            <div id="submenu3"><!--begin tab 3-->

                {{CONTENT}}

            </div><!--end tab 3-->

        </div><!--end subtab set 1-->

</div><!--end main tab's content-->

私は .each() を使用して目的の効果を得ようとしましたが、私の構文はかなりずれていると思います:

$(document).ready(function() {


 $(".tabs > div").each(function(i) {
        $('.innertabs' + i > div ').hide();
            $('.innertabs '+i div:first').show();
        $('.innertabs' + i 'ul.inner-tab-nav' + i li: first ').addClass('
        active ');
        $('.innertabs '+i '
        ul.inner - tab - nav '+i li a').click(function() {
            $('.innertabs' + i 'ul.inner-tab-nav' + i li ').removeClass('
            active ');
            $(this).parent().addClass('
            active ');
        var currentTab = $(this).attr('
            href ');
            $('.innertabs '+i > div').hide();
            $(currentTab).fadeIn(400).show();
            //$(currentTab).show();
            return false;
        }
        });
    });​
4

3 に答える 3

4

で不必要な反復を行う代わりに、starts-with 属性セレクターを次のよう.each()に使用できます。^=

$('[class^="innertabs"] > div').hide();
$('[class^="innertabs"] div:first').show();
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li:first').addClass('active');
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li a').click(function() {
    $('[class^="innertabs"] ul[class^="inner-tab-nav"] li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('[class^="innertabs"] > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});
于 2012-06-15T20:13:12.423 に答える
1

たくさんの+andが欠けていて、最後'に余分なものがあります}

$(".tabs > div").each(function(i) {
    $('.innertabs' + i + ' > div ').hide();
    $('.innertabs '+i +' div:first').show();
    $('.innertabs' + i + 'ul.inner-tab-nav' + i + ' li: first ').addClass('active ');
    $('.innertabs '+i +'ul.inner - tab - nav '+i+' li a').click(function() {
    $('.innertabs' + i +' ul.inner-tab-nav' + i +' li ').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('.innertabs '+i +' > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});
于 2012-06-15T20:09:45.827 に答える
1

できることは、スクリプトで使用できる共通のクラスを持ちながら、いくつかのクラスを使用して要素を区別することです。

<div class="tabs">

    <ul class="tab-nav">

    <div class="inner-tabs second">
        <ul class="inner-tab-nav second">
        </ul>

        <div class="inner-tabs third">
            <ul class="inner-tab-nav third">
            </ul>
        </div>

    </div>

スクリプトでは、単純にクラスを使用し.inner-tabsて動作をコーディングできます。CSS では、スタイリングを区別するため
に組み合わせることができます。.inner-tabs.second

この CSS クラスの使用により、よりクリーンなマークアップとセマンティックが生成されると思います。

さらに、あまりにも複雑な jquery セレクターを使用すると、選択が遅くなり、読みにくくなり.inner-tabsます[class^="innertabs"]。

于 2012-06-15T20:14:49.177 に答える