菜单 Fullpage.js

Question

我有一个问题要问你，我尝试用 fullpage.js 创建一个新项目。

但是，我的问题是，如何制作菜单，我尝试：

问题是，例如，当我单击 porfolio 时，没关系，我在第二张幻灯片上，但是.. 我无法单击另一个选项卡

(HTML 部分)

<nav>
    <ul>
        <li data-menuanchor="Accueil"><a href="#Acc">Accueil</a></li>
        <li data-menuanchor="PortFolio"><a href="#Port">PortFolio</a></li>
        <li data-menuanchor="Contact"><a href="#Con">Contact</a></li>
    </ul>
</nav>

对于 JS 部分：

<script type="text/javascript">
    $(document).ready(function () {
        $('#fullpage').fullpage({
            sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], 
            anchors: ['Accueil', 'PortFolio', 'Contact'],

        });
        $.fn.fullpage.setScrollingSpeed(1500);
    });
</script>

感谢您的帮助:)

Answer 1

哎呀！ 很抱歉，我无缘无故地创建了这篇文章。我找到了解决方案。

解决方案是更改我的 CSS 文件。

与，此配置：

 #menu li { display:inline-block; margin: 10px; color: #000; background:#fff; background: rgba(255,255,255, 0.5); -webkit-border-radius: 4px; border-radius: 4px; } #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; }