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

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

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

我的HTML：

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

---

最后，我决定在fadetoggle中使用引导旋转滑块，并设法使一切正常工作

以下是fadetoggle（）的代码：

---

你应该创建一个JSFIDLE并将链接添加到你的问题中。你能显示你的css吗？我发现我的fadeToggle（）不起作用，因为我的编码方式有错误。我已经纠正了这一点，并设法使其发挥作用。

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

$(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;
  });


});

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