jQuery - 一个页面上的多个内容滑块，一次只移动一个

Question

我想创建一个jQuery内容滑块，最终看起来像Basecamp的这个旧的37Signals游览页面：http://cl.ly/2K2l1e010w0b3q1g261N（不幸的是，他们改变了网站TODAY时更新的Basecamp）。

我基本上想要在一个页面上有多个内容滑块。目前点击一个侧边栏中的链接使得内容区域滑动。

和提琴：http://jsfiddle.net/saltcod/dm2dn/

感谢您的帮助

特里

Answer 1

东西告诉我有一个更干净的方法来做到这一点，但下面的工作。它找到所点击的链接的索引，然后基于该链接进行滑块动画。例如：jsFiddle。

的jQuery： //处理NAV单击 $（ “导航一个。”）点击（函数（E）{

//stop browser default 
    e.preventDefault(); 

    //remove on states for all nav links 
    $(".nav a").removeClass("on"); 

    //add on state to selected nav link 
    $(this).addClass("on"); 

    //set margin of slider to move 
    if ($(".nav a").index(this) <= 4) { 
     $(".slider:eq(0)").animate({ 
      marginLeft: margins[$(this).attr("href").split("#")[1]] 
     }); 
    } else { 
     $(".slider:eq(1)").animate({ 
      marginLeft: margins[$(this).attr("href").split("#")[1]] 
     }); 
    } 
});​ 

注意，感觉我对一个更简单的方法可能涉及更改。布局和加入其他元素分开包装内容

UPDATE

这里是新的jQuery来处理任意数量的组和链接：

//handle nav click 
$(".group a").click(function(e){ 

    //stop browser default 
    e.preventDefault(); 

    //remove on states for all nav links 
    $(".nav a").removeClass("on"); 

    //add on state to selected nav link 
    $(this).addClass("on"); 

    //set margin of slider to move 
    $(this).parents('.group').find('.slider').animate({ 
     marginLeft: margins[$(this).attr("href").split("#")[1]] 
    });      
}); 

jsFiddle example。 jQuery的变化是次要的和唯一的HTML变化包裹每个组列表/分隔的包装DIV与班集体是这样的：

<div class="group"> 
    <ul class="nav"> 
     <li class="thumb1"><a href="#panel1" title="Panel 1">Panel 1</a></li> 
     <li><a href="#panel2">Panel 2</a></li> 
     <li><a href="#panel3">Panel 3</a></li> 
     <li><a href="#panel4">Panel 4</a></li> 
     <li><a href="#panel5">Panel 5</a></li> 
    </ul> 
    <div class="panels"> 
     <div class="slider"> 
      <div id="panel1"> 
       <p>From this day forward, Flight Control will be known by two words: 
       &#39;Tough&#39; and &#39;Competent.&#39; </p> 
       <p>It&#39;s just mind-blowingly awesome. I apologize, and I wish I was 
       more articulate, but it&#39;s hard to be articulate when your mind&#39;s 
       blown—but in a very good way.</p> 
      </div> 
      <div id="panel2"> 
       <p>From this day forward, Flight Control will be known by two words: 
       &#39;Tough&#39; and &#39;Competent.&#39; Tough means we are forever accountable 
       for what we do or what we fail to do. We will never again compromise 
       our responsibilities. </p> 
       <p>Every saint and sinner in the history of our species lived there--on 
       a mote of dust suspended in a sunbeam.</p> 
      </div> 
      <div id="panel3"> 
       <p>These words are the price of admission to the ranks of Mission 
       Control.</p> 
       <p>It&#39;s just mind-blowingly awesome. I apologize, and I wish I was 
       more articulate, but it&#39;s hard to be articulate when your mind&#39;s 
       blown—but in a very good way.</p> 
      </div> 
      <div id="panel4"> 
       <p>From this day forward, Flight Control will be known by two words: 
       &#39;Tough&#39; and &#39;Competent.&#39; Tough means we are forever accountable 
       for what we do or what we fail to do. </p> 
       <p>Look again at that dot. That&#39;s here. That&#39;s home. That&#39;s us. 
       On it everyone you love, everyone you know, everyone you ever heard 
       of, every human being who ever was, lived out their lives. </p> 
      </div> 
      <div id="panel5"> 
       <p>The view of the Earth from the Moon fascinated me—a small disk, 
       240,000 miles away. </p> 
       5 
       <p>The view of the Earth from the Moon fascinated me—a small disk, 
       240,000 miles away. </p> 
       5 </div> 
     </div> 
    </div> 
</div> 

Answer 2

的基本方法，这将帮助您管理这是一个$。每个循环中隔离每个实例。这里有一些伪代码应该有助于解释

$('.myModuleWrapper').each(function(){ 
     var $this=$(this);  

     /* now when attach handlers we only search within current instance*/ 
     var $myClicker=$this.find('.myClickerClass');  
     var $myContent=$this.find('.myContentClass');  


     $myClicker.find('.myClickerClass').click(function(){ 
      $myContent.doSomething(); 
     });        

})