这是我的代码: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>
答案 0 :(得分:6)
由于你定位元素的方式,一些堆栈顺序已经结束,因此幻灯片点击事件实际上发生在这两个按钮之上。
尝试添加z-index: 999;
,您将看到预期会返回的功能。
$(document).ready(function() {
$("#fullpage").fullpage({
verticalCentered: false,
resize: true,
scrollingSpeed: 700,
css3: true,
easing: "easeOutBounce"
});
});
&#13;
* {
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:2)
<td ng-repeat="person in trx.persons">
<span>{{person.name}}</span>
<span>{{person.age}}</span>
</td>
下有.button-container
。对.fp-slides
大于z-index
.button-container
z-index
应用.fp-slides