Question

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

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

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

用于切换的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

最后我决定使用bootstraps轮播滑块和我的fadetoggle，并设法使一切正常。

以下是我的fadetoggle（）的代码：

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

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

1 个答案: