HTML页面上的按钮不起作用

Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work. I try to solve it for hour, but I don't understand the problem. You can find the site here.

你好，我有一个HTML页面。我使用按钮在此页面上导航。但是在有幻灯片的2部分中，按钮不起作用。我试着解决它一小时，但我不明白这个问题。你可以在这里找到这个网站。

And you can find the JSFiddle here.

你可以在这里找到JSFiddle。

Here there are the part html:

这里有部分html：

<div class="section" id="section5">
    <div class="slide" id="slide1">
        <div class="intro">
            <h1>#your Led Solution 1 of 2</h1>
            <br><br>
            <p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
            <img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
            <div id="type2">
            <a href="http://www.autoelettric.com/index.php/en/products/i-ls-intelligent-led-solutions-en"><div class="btn-5" width="50px">→ VIEW PRODUCT</div></a>
            <br><br>
            </div>
            <br>
        </div>
        <a href="#ExactPower" onclick="status2()"><div class="btn-5-previous" width="50px">↩ PREVIOUS</div></a>
        <a href="#SafeConversion" onclick="status0()"><div class="btn-5-top" width="10px">↑</div></a>
    </div>

    <div class="slide" id="slide2">
        <div class="intro">
            <h1>#your Led Solution 2 of 2</h1>
            <br><br>
            <p>Use an ILS LED Flasher Unit &#38; LED indicator lamps with integrated pulse</p>
            <img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
            <div id="type2">
            <a href="http://www.autoelettric.com/index.php/en/products/i-ls-intelligent-led-solutions-en"><div class="btn-5" width="50px">→ VIEW PRODUCT</div></a>
            <br><br>
            </div>
            <br>
        </div>
        <a href="#ExactPower" onclick="status2()"><div class="btn-5-previous" width="50px">↩ PREVIOUS</div></a>
        <a href="#SafeConversion" onclick="status0()"><div class="btn-5-top" width="10px">↑</div></a>
    </div>
    <a href="#ExactPower" onclick="status2()"><div class="btn-5-previous" width="50px">↩ PREVIOUS</div></a>
    <a href="#SafeConversion" onclick="status0()"><div class="btn-5-top" width="10px">↑</div></a>
</div>

1 个解决方案

#1

• .fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
• .fp-slides有z-index：1;它将它置于返回按钮的顶部，因此要么删除.fp-slides的z-index值，要么将z-index添加到回到顶部按钮。
• Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.
• 在.fp-slides .slides中还有另一组#ExactPower和#SafeConversion按钮。