1

有谁知道 jQuery 插件可以在点击时上下滑动内容并向上或向下推送内容?如果用户单击#nav-1,则向上滑动#slide-1(向下推#slide-2 和/或3),如果用户单击#nav-2,则向上或向下滑动#slide-2(取决于是3 还是1处于活动状态),如果用户单击#nav3,则向上滑动#slide-3。我找不到适用于我的应用程序的应用程序......谢谢

            <div id="vertical-slider" class="vertical-slider clearfix">
                <div class="slider-nav">
                    <a href="#" class="slide-1">
                        <span id="nav-1" ></span>
                        <span id="nav-2" class="active"></span>
                        <span id="nav-3"></span>
                    </a>
                </div>

                <div class="slides">
                    <div id="slide-1" class="slide ">
                        <h2>Hi, I'm sdf.</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis, massa vitae ultricies consectetur, tellus erat bibendum felis, vel rhoncus est metus nec mauris. Aliquam id iaculis erat.</p>
                        <p>Phasellus facilisis, turpis feugiat vehicula cursus, mi augue interdum enim, in tincidunt nulla velit vel diam. Nam hendrerit lobortis dolor sit amet imperdiet. Morbi leo risus, lobortis fringilla tempor ut, venenatis vel ipsum. </p>
                    </div>

                    <div id="slide-2" class="slide active">
                        <h2>This is the slide heading</h2>
                        <ul>
                            <li>This is a list item</li>
                            <li>This is a list item</li>
                        </ul>
                        Sample link that <a href="#" title="">goes nowehere</a>.
                    </div>

                    <div id="slide-3" class="slide">
                        <h2>Get in Touch!</h2>

                        <div class="connect-icons clearfix">
                            <div class="row email">
                                <span></span><a href="#">jdoe@asdf</a>
                            </div>
                            <div class="row linkedin">
                                <span></span>Connect via <a href="#" title="LinkedIn">LinkedIn</a>
                            </div>
                            <div class="row phone">
                                <span></span><a href="#">(877) 302-2393</a>
                            </div>
                            <div class="row vcard">
                                <span></span>Download <a href="#">vCard</a>
                            </div>
                            <div class="row fax">
                                <span></span>(877) 302-2300
                            </div>
                            <div class="row pdf">
                                <span></span>Download <a href="#">Bio (pdf)</a>
                            </div>
                            <div class="row twitter">
                                <span></span><a href="#">Twitter</a>
                            </div>
                        </div>
4

0 回答 0