简体   繁体   English

如何将href链接到div id标签jQuery滑块视差滑块

[英]how to link href to a div id tag jquery slider parallax slider

I'm working on the jquery slider (sequence master parallax). 我正在使用jquery滑块(序列主视差)。 I would like to add a menu at the top which allows users to jump to each slide. 我想在顶部添加一个菜单,允许用户跳到每张幻灯片。 My problem is that I don't manage to link my href to my div id. 我的问题是我无法将href链接到我的div ID。 Actually, I don't know how to proceed. 实际上,我不知道如何进行。 For example, when you click on Menu 1 it goes to the slide which has the div id="menu1". 例如,当您单击菜单1时,它会转到具有div id =“ menu1”的幻灯片。 My other problem if I add between <li class="animate-in"> <div id="menu1"> ... </div></li> it breaks all the animation. 我的另一个问题是,如果在<li class="animate-in"> <div id="menu1"> ... </div></li>则会破坏所有动画。 Here the code : Sequence Theme Demo - Sliding Horizontal Parallax if (typeof jQuery == 'undefined'){ document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%3E')); 此处的代码为:序列主题演示-滑动水平视差if(jQuery的type ='undefined'){document.write(unescape('%3Cscript src =“ ../../ scripts / jquery-min.js”%3E %3C /脚本%3E')); } }

</head>
<body>  
<menu-->
    <nav>
    <ul>
                    <li><a href="#">menu 1</a></li>
                    <li><a href="#">menu 2</a></li>
            </ul>
    </nav>
    <!--end menu-->
    <div id="sequence">


        <img class="sequence-prev" src="images/bt-prev.png" alt="Previous" />
        <img class="sequence-next" src="images/bt-next.png" alt="Next" />

        <ul class="sequence-canvas">

            <li class="animate-in">


                <div class="info">
                    <h2>Built using Sequence.js</h2>
                    <p>The Responsive Slider with Advanced CSS3 Transitions</p>
                </div>
                <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                <img class="balloon" src="images/balloon.png" alt="Balloon" />

            </li>

            <li>
                <div class="info">
                    <h2>Creative Control</h2>
                    <p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
                </div>
                <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                <img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
            </li>
            <li>
                <div class="info">
                    <h2>Cutting Edge</h2>
                    <p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
                </div>
                <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                <img class="kite" src="images/kite.png" alt="Kite" />
            </li>
        </ul>
    </div>
</body>

Add a href link like this 像这样添加href链接

<a href="your link">
<li class="animate-in">
                <div class="info">
                    <h2>Built using Sequence.js</h2>
                    <p>The Responsive Slider with Advanced CSS3 Transitions</p>
                </div>
                <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                <img class="balloon" src="images/balloon.png" alt="Balloon" />

            </li>
</a>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM