Question

我正在尝试创建一个jQuery内容滑块，最终看起来像Basecamp的旧37Signals巡演：http://cl.ly/2K2l1e010w0b3q1g261N（遗憾的是，他们在更新后的Basecamp时更改了网站）。

我基本上希望在一个页面上有多个内容滑块。目前，点击一个侧边栏中的链接会使两个内容区域滑动。

感谢您的帮助

特里

Answer 1

有些东西告诉我有一个更清洁的方法来做到这一点，但以下工作。它找到点击链接的索引，然后根据它进行滑块动画。 jsFiddle 示例。

jQuery的： //处理导航点击 $（“。nav a”）。点击（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
    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]]
        });
    }
});

请注意，我对更简单方法的感觉可能涉及更改布局并添加其他元素以分别包装内容。

<强>更新

这是处理任意数量的组和链接的新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更改是将每个list / div组包装在一个包装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

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

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

})

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

2 个答案: