0

我将 jQuery-ui 用于它的选项卡功能，并且还使用 bxSlider 仅在第一个选项卡中滑动图像/内容。但是，当我单击第二个选项卡时，bxSlider 的“prev”和“next”选项仍在我的容器中。我尝试使用event.stopPropagation(),event.preventDefault()并stop()停止该功能，在意识到这些不起作用后，我尝试创建这样的功能：

(function() {
    $('#ab').click(function() {
        $('#showcase').bxSlider({
            controls: false,
        });
    });
});

其中 '#ab' 是选项卡，#showcase 是图像所在的列表元素。此功能不会完全阻止 bxSlider 处于活动状态，它只会隐藏控件。然而，这也不起作用。

有谁知道如何做到这一点？

这是我的 HTML：

<div class="container">
    <div id="tabs">
        <ul>
            <li><a id="sh" href="#showcase">Resumes</a></li>
            <li><a id="ab" href="#about">About</a></li>
        </ul>

        <div id="showcase_container">
            <ul id="showcase">
                <li>
                    <a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
                    <a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
                    <a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
                </li>

                <li>
                    <a href="#"><img src="images/resume-temp1.jpg"></a>
                    <a href="#"><img src="images/resume-temp2.jpg"></a>
                    <a href="#"><img src="images/resume-temp3.jpg"></a>
                </li>
            </ul>

            <div id="about">
                <span class="ab_title">Portfolio</span>
                    <ul id="portfolio_list">
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                    </ul>
            </div>

        </div>
    </div>
</div>

这是我的 JavaScript：

    //initialize tabs
$(document).ready(function() {
    $('#tabs').tabs();
});

//initialize slider
$(document).ready(function(){
    $('#showcase').bxSlider({
        hideControlOnEnd: true,
        infiniteLoop: false,
    });
});

任何帮助将不胜感激！如果无法做到这一点，有人可以将我重定向到类似的图像/内容滑块，以便我可以完成这项工作吗？

4

1 回答 1

0

将用于滑块的 ul 标记包装在另一个 div（称为 ShowcaseTab）或其他任何内容中。然后 bxslider 将包含在该选项卡中，并且箭头应该以正确的方式显示和隐藏。

<div id="showcaseTab">
 <ul id="showcase">
            <li>
                <a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
                <a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
                <a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
            </li>

            <li>
                <a href="#"><img src="images/resume-temp1.jpg"></a>
                <a href="#"><img src="images/resume-temp2.jpg"></a>
                <a href="#"><img src="images/resume-temp3.jpg"></a>
            </li>
  </ul>
 </div>
于 2012-08-13T23:57:08.887 回答