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

问题描述：

我试图切换多个div从左到右单击链接时。滑动多个div从左到右与jquery切换

在每个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>

HTML对于切换的div：

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


});

你应该创建一个的jsfiddle和链接添加到您的问题。 – Popo

你可以展示你的CSS？ –

我发现我的fadeToggle（）没有工作，因为我编写royalslider的方式有错误。我已经纠正了这种情况，并设法使其工作。 – fnk

答

最后我决定用白手起家转盘滑盖我fadetoggle并设法让一切工作。

这里是我的fadetoggle（）的代码：

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

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

相关推荐