滑動多個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; 
    }); 


});

來源

2014-02-14 fnk

你應該創建一個的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; 
    });

來源

2014-02-21 11:51:58 fnk

滑動多個div從左到右與jquery切換

回答

相關問題