【问题标题】:how to link href to a div id tag jquery slider parallax slider如何将href链接到div id标签jquery滑块视差滑块
【发布时间】:2014-04-01 14:08:07
【问题描述】:

我正在研究 jquery 滑块(序列主视差)。我想在顶部添加一个菜单,允许用户跳转到每张幻灯片。我的问题是我无法将我的 href 链接到我的 div id。实际上,我不知道该怎么做。例如,当您单击菜单 1 时,它会转到具有 div id="menu1" 的幻灯片。如果我在<li class="animate-in"> <div id="menu1"> ... </div></li> 之间添加我的另一个问题,它会破坏所有动画。 这里的代码: 序列主题演示 - 滑动水平视差 if (typeof jQuery == '未定义'){ document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%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>

【问题讨论】:

    标签: javascript jquery html css slider


    【解决方案1】:

    像这样添加一个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>
    

    【讨论】:

    • 您好,感谢您的回复。问题是,如果我有你所说的 href 标签,它会破坏动画。另外,我想使用导航标签中的菜单转到不同的幻灯片。问候,埃里克。
    • 然后您可以将 href 链接到另一个子标签,例如

      使用 Sequence.js 构建

      具有高级 CSS3 过渡的响应式滑块

    猜你喜欢
    • 1970-01-01
    • 2016-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-04
    • 1970-01-01
    • 1970-01-01
    • 2017-05-17
    相关资源
    最近更新 更多