Question

我再次发布这个小提琴，因为我有一个新问题。

现在，我想添加一个新容器。当我单击下一个/上一个时，只有底部容器的选项卡应该更改，这应该分别针对它们进行。

我试过了：

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");
}

有人可以告诉我我的代码有什么问题以及为什么第二个代码不能正常工作

Answer 1

错误是因为您必须在元素上使用唯一ID。解决方案是在kunderpagination和kunderpagination2中将按钮从使用id更改为class。并且可选地，您应该更改kunderpagination和kunderpagination2以使用ID而不是类，但这只是一个建议，因为这不会导致任何问题。

更改两次出现：

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

到此：

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

并更新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/

Jquery单击单个容器的Next和previous

1 个答案: