使用 jquery 切换从左到右滑动多个 div

Question

我正在尝试在单击链接时从左到右切换多个div。

每个div中都有一个幻灯片和一些内容。到目前为止，我可以在我的链接之间切换，但是当我到达第二个div时，我的内容应该会出现，但它没有。我在我的 css 中设置了一个显示：none，因为当页面加载时，我只希望显示第一项，然后当用户单击任何其他链接时，将显示该部分的内容。

我的网页：

<div class="span2">
            <div class="product-links" data-target=".ps1">
                <a href="">ps1</a>
            </div>
        </div>
        <div class="span2">
            <div class="product-links" data-target=".ps2">
                <a href="">ps2</a>
            </div>
        </div>
        <div class="span2">
            <div class="product-links" data-target=".ps3">
                <a href="">ts1</a>
            </div>
        </div>

用于切换的div 的 HTML：

<div class="container">
        <div class="row toggle-prod ps1">
            <div class="span7">
                <div class="royalSlider-ps1">
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                </div>
            </div>
            <div class="span5">
                <p>Item 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
<div class="container">
        <div class="row toggle-prod ps2">
            <div class="span7">
                <div class="royalSlider-ps2">
                    <img class="rsImg" src="" />
                </div>
            </div>
            <div class="span5">
                <p>item2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
            </div>
        </div>
    </div>

javascript：

$(document).ready(function() {
$(".product-links a").click(function(){
    var divToToggle2 = $( $(this).data('target') );
    $(".toggle-prod:visible").not(divToToggle2).hide();
    divToToggle2.fadeToggle("fast", "linear");
    return false;
  });

});

Answer 1

最后，

我决定使用带有淡入淡出切换的引导轮播滑块，并设法使一切正常。

这是我的 fadetoggle（） 的代码：

$(".product-links").click(function(){
    var divToToggle2 = $( $(this).data('target') );
    $(".toggle-prod:visible").not(divToToggle2).hide();
    divToToggle2.fadeIn("slow", "linear");
    return false;
  });