<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/fullPage.js/2.8.0/jquery.fullpage.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script> <script src="http://cdn.bootcss.com/fullPage.js/2.8.0/jquery.fullpage.js"></script> <script src="http://cdn.bootcss.com/fullPage.js/2.8.0/vendors/jquery.easings.min.js"></script> <style> </style></head><body> <ul id="list"> <li data-menuanchor="page1"> <a href="#page1"> 第一个 </a> </li> <li data-menuanchor="page2" > <a href="#page2"> 第二个 </a> </li> <li data-menuanchor="page3"> <a href="#page3"> 第三个 </a> </li> <li data-menuanchor="page4"> <a href="#page4"> 第四个 </a> </li> </ul> <div id="fullPage"> <div> 第一个 </div> <div> 第二个 </div> <div> 第三个 </div> <div> 第四个 </div> </div> <script> $(document).ready(function(){ $('#fullPage').fullpage({ anchors: ['page1','page2','page3','page4'], verticalCentered: false, navigation: true, menu: "#list" }); }); </script></body></html>
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
<!--这个的样式你需要自己写的 不然的话会被内容区覆盖，所以你就点不到了--> <ul id="list" style="position: fixed;z-index: 100"> <li data-menuanchor="page1"> <a href="#page1"> 第一个 </a> </li> <li data-menuanchor="page2" > <a href="#page2"> 第二个 </a> </li> <li data-menuanchor="page3"> <a href="#page3"> 第三个 </a> </li> <li data-menuanchor="page4"> <a href="#page4"> 第四个 </a> </li> </ul> <div id="fullPage"> <!--这里同级的div需要添加 class="section"--> <div class="section"> 第一个 </div> <div class="section"> 第二个 </div> <div class="section"> 第三个 </div> <div class="section"> 第四个 </div> </div>
- 1 回答
- 0 关注
- 2402 浏览
添加回答
举报
0/150
提交
取消