javascript - jquery ui 选项卡和 jquery 插件 - 插件只被初始化一次

Question

我目前正在一个网站上工作，它使用 jquery ui 选项卡，在每个选项卡中我都实现了 jcarousel，它在第一个选项卡中看起来和工作正常，但是当我切换到第二个或第三个选项卡时，没有 jcarousel功能为什么会这样？这是我的代码，

`$("#related").tabs();`
`$('#complimentary-carousel, #similar-carousel, #viewed-carousel').jcarousel({
    scroll : 5,
    visible: 5
});`

HTML看起来像这样，

<div id="related" class="clearfix">
    <ul class="tabs">
        <li><a href="#complimentary">Complimentary</a></li>
        <li><a href="#similar">Similar</a></li>
        <li><a href="#viewed">Recently Viewed</a></li>
    </ul>
    <div id="complimentary">
        <ul id="complimentary-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
    <div id="similar">
        <ul id="similar-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
    <div id="viewed">
        <ul id="viewed-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Answer 1

请参阅此处的问题。似乎使其工作的唯一方法是在“tabsshow”事件上初始化 jcarousel。如果您尝试在隐藏选项卡上初始化它们，您将面临其他插件和小部件的问题。