<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css"> <style> .section { text-align: center; font-size: 200%; } #menu li { display:inline-block; margin: 10px; color: #000; background:#fff; background: rgba(255,255,255, 0.5); -webkit-border-radius: 10px; border-radius: 10px; } #menu li.active{ background:#666; background: rgba(0,0,0, 0.5); color: #fff; } #menu li a{ text-decoration:none; color: #000; } #menu li.active a:hover{ color: #000; } #menu li:hover{ background: rgba(255,255,255, 0.8); } #menu li a, #menu li.active a{ padding: 9px 18px; display:block; } #menu li.active a{ color: #fff; } #menu{ position:fixed; top:0; left:0; height: 40px; z-index: 70; width: 100%; padding: 0; margin:0; } #section1{ background-size: cover; background-image: url(ari1.jpg); } #section2{ background-size: cover; background-image: url(ari2.jpg); } </style> </head> <body> <ul id="menu"> <li data-menuanchor="1page"><a href="#1page">①</a></li> <li data-menuanchor="2page"><a href="#2page">②</a></li> <li data-menuanchor="3page"><a href="#3page">③</a></li> <li data-menuanchor="4page"><a href="#4page">④</a></li> <li data-menuanchor="5page"><a href="#5page">⑤</a></li> <li data-menuanchor="6page"><a href="#6page">⑥</a></li> </ul> <div id="fullpage"> <div class="section" id="section1">Some section</div> <div class="section" id="section2">Some section</div> <div class="section" id="section3">Some section</div> <div class="section" id="section4">4 section</div> <div class="section" id="section5">5 section</div> <div class="section" id="section6">⑥ section</div> </div> <script src="bubbleparticle.2.js"></script>//泡 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script> <script> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['1page', '2page', '3page','4page','5page','6page'], menu: '#menu', sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5'] //ここの''内の色を変えられます。 }); }); </script> </body> </html> fullpage.jsにてかみしばいを作成しています。 なぜか5ページ目だけボタンをクリックしても反応されませんどなたか解決していただけないでしょうか。
回答1件
あなたの回答
tips
プレビュー