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

有人可以告诉我我的代码有什么问题以及为什么第二个代码不起作用

4

1 回答 1

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>
  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 回答