0

新しい問題が発生したため、このフィドルを再度投稿します。

ここにフィドルがあります：http://jsfiddle.net/XvAR6/

今、新しいコンテナを追加したいと思います。次/前をクリックすると、下部のコンテナのタブのみが変更され、これは両方に対して個別に発生するはずです。

私はこれを試しました：

html

<div class='container1'>

<span class="kunderpagination">
    <a href="#" id="prev">« Previous</a> |
    <a href="#" id="next">Next »</a>
</span>

<ul class="kunder">
    <li>
        <span class="udtalelse">
            <div id="tab1">
                <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li class="active"><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Three</span></a></li>
                </ul>
                <div id="fragment-1">
                    1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
                </div>
                <div id="fragment-2">
                2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-3">
                3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
             </div>
        </span>
    </li>
    <li>
        <span class="udtalelse">
                <div id="tab2">
                <ul>
                <li><a href="#fragment-4"><span>Four</span></a></li>
                <li class="active"><a href="#fragment-5"><span>Five</span></a></li>
                <li><a href="#fragment-6"><span>Six</span></a></li>
                </ul>
                <div id="fragment-4">
                    4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                </div>
                <div id="fragment-5">
                5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-6">
                6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
             </div>
        </span>
    </li>
    <li>
        <span class="udtalelse">
            3
        </span>
    </li>
</ul>

</div>

<div class='container2'>

<span class="kunderpagination2">
    <a href="#" id="prev">« Previous</a> |
    <a href="#" id="next">Next »</a>
</span>

<ul class="kunder2">
    <li>
        <span class="udtalelse">
            <div id="tab3">
                <ul>
                <li><a href="#fragment-7"><span>One</span></a></li>
                <li class="active"><a href="#fragment-8"><span>Two</span></a></li>
                <li><a href="#fragment-9"><span>Three</span></a></li>
                </ul>
                <div id="fragment-7">
                    1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
                </div>
                <div id="fragment-8">
                2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-9">
                3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
             </div>
        </span>
    </li>
    <li>
        <span class="udtalelse">
                <div id="tab4">
                <ul>
                <li><a href="#fragment-10"><span>Four</span></a></li>
                <li class="active"><a href="#fragment-11"><span>Five</span></a></li>
                <li><a href="#fragment-12"><span>Six</span></a></li>
                </ul>
                <div id="fragment-10">
                    4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
                </div>
                <div id="fragment-11">
                5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-12">
                6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
             </div>
        </span>
    </li>
    <li>
        <span class="udtalelse">
            3
        </span>
    </li>
</ul>

</div>

そしてjquery：

$("#tab1, #tab2, #tab3, #tab4").tabs({active: 1}).tabs({
        collapsible: false,
        hide: {
            effect: "slideUp",
            duration: 500
        },
        show: {
            effect: "slideDown",
            duration: 500
        }
    });

var all = $('.udtalelse').addClass("passiv");

var i = -1;

$('#prev').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = ++i % all.length );
}).click();

function ctrlKunder(ele) {
    all.removeClass("active").addClass("passiv");
    all.eq(ele).removeClass("passiv").addClass("active");
}

誰かが私のコードで何が間違っているのか、2番目のコードが機能しない理由を教えてください

4

1 に答える 1

1

エラーは、要素に一意の ID を使用する必要があるためです。解決策は、kunderpagination と kunderpagination2 の両方で、ボタンを id から class に変更することです。オプションで、クラスの代わりに ID を使用するように kunderpagination と kunderpagination2 を変更する必要がありますが、それは問題を引き起こしていないため、単なる提案です。

これの両方の出現を変更します。

<a href="#" id="prev">« Previous</a> |
<a href="#" id="next">Next »</a>

これに：

<a href="#" class="prev">« Previous</a> |
<a href="#" class="next">Next »</a>
  1. そして、jquery コードを更新して、ID ではなくクラスを選択します。

これを変える：

$('#prev').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = !i ? all.length - 1 : --i );
});

$('#next').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = ++i % all.length );
}).click();

これに：

$('.prev').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('.next').click(function(e) {
   e.preventDefault();
    ctrlKunder( i = ++i % all.length );
}).click();

あなたの新しい作業フィドル: http://jsfiddle.net/acturbo/xNFgs/

于 2013-04-25T22:32:42.863 に答える