javascript - 按钮无法点击？

Question

这是我的代码笔:http://codepen.io/Chiz/pen/MaBwBb

当你点击按钮时，通常按钮会给出“按下”的视觉反馈，但在这种情况下，并没有这样的事情发生。就像按钮已被禁用一样。这是为什么？

$(document).ready(function() {
  $("#fullpage").fullpage({
    verticalCentered: false,
    resize: true,
    scrollingSpeed: 700,
    css3: true,
    easing: "easeOutBounce"
  });
});

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div.container {
  position: relative;
}
#fullpage {
  width: 100%;
  height: 100%;
  background-color: #ffe4b3;
}
#header {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color: #343434;
}
#header ul {
  list-style-type: none;
  color: white;
  margin: 0;
  height: 100%;
}
#header ul li {
  display: inline-block;
  float: right;
  padding: 0rem 2rem;
  width: 10rem;
  height: 100%;
  text-align: center;
  font-size: 1rem;
}
#header ul li a {
  color: white;
  text-decoration: none;
}
#footer {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0px;
  background-color: black;
}
.slide {
  font-size: 1.5rem;
}
.button-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.prev,
.next {
  width: 7rem;
  height: 3rem;
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />



<div id="fullpage">
  <div class="section active container">
    <div id="header">
      <ul>
        <li><a href="">Link 1</a>
        </li>
        <li><a href="">Link 2</a>
        </li>
        <li><a href="">Link 3</a>
        </li>
      </ul>
    </div>
    <div class="slide">Slide1</div>
    <div class="slide">Slide2</div>
    <div class="slide">Slide3</div>

    <div class="button-container">
      <button type="button" class="prev">Prev</button>
      <button type="button" class="next">Next</button>
    </div>

    <div id="footer"></div>
  </div>
</div>

Answer 1

由于您放置元素的方式，一些堆栈顺序不正确，因此幻灯片点击事件实际上发生在这 2 个按钮的顶部。

尝试添加 z-index: 999;，您会看到您期望的功能回来了。

CodePen Example

$(document).ready(function() {
  $("#fullpage").fullpage({
    verticalCentered: false,
    resize: true,
    scrollingSpeed: 700,
    css3: true,
    easing: "easeOutBounce"
  });
});

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div.container {
  position: relative;
}
#fullpage {
  width: 100%;
  height: 100%;
  background-color: #ffe4b3;
}
#header {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color: #343434;
}
#header ul {
  list-style-type: none;
  color: white;
  margin: 0;
  height: 100%;
}
#header ul li {
  display: inline-block;
  float: right;
  padding: 0rem 2rem;
  width: 10rem;
  height: 100%;
  text-align: center;
  font-size: 1rem;
}
#header ul li a {
  color: white;
  text-decoration: none;
}
#footer {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0px;
  background-color: black;
}
.slide {
  font-size: 1.5rem;
}
.button-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.prev,
.next {
  width: 7rem;
  height: 3rem;
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
<script src="https:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />



<div id="fullpage">
  <div class="section active container">
    <div id="header">
      <ul>
        <li><a href="">Link 1</a>
        </li>
        <li><a href="">Link 2</a>
        </li>
        <li><a href="">Link 3</a>
        </li>
      </ul>
    </div>
    <div class="slide">Slide1</div>
    <div class="slide">Slide2</div>
    <div class="slide">Slide3</div>

    <div class="button-container">
      <button type="button" class="prev">Prev</button>
      <button type="button" class="next">Next</button>
    </div>

    <div id="footer"></div>
  </div>
</div>