0
考虑下面的代码:菜单锚杆不正常(fullpage.js)
<!DOCTYPE html>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/style.css" />">
<link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/jquery.fullPage.css" />">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="<c:url value="/resources/js/jquery.easings.min.js" />" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery.fullPage.js" />" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(' #fullpage ').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['firstPage', 'secondPage', 'thirdPage'],
menu: ' #mymenu ',
css3: true
});
});
</script>
</head>
<body>
<ul id="mymenu">
<li data-menuanchor="firstPage"><a href="#firstPage">Health Metrics</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Client Login Information</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Active Operator Information</a> </li>
</ul>
<div id="fullpage">
<div class="section">
## Stuffs
</div>
<div class="section">
## Stuffs
</div>
<div class="section">
## Stuffs
</div>
</div>
</body>
<script type="text/javascript">
setTimeout(function(){
window.location.reload(1);
}, 20000);
</script>
</html>
锚标签不固定在顶部和不显示为按钮。当它进入第二页时,它消失。但在演示中,它显示为很好的按钮,并保持在顶部。
演示页:Click Here