菜单 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

哎呀！很抱歉无缘无故地创建了这个 post。我找到了解决方案。

解决方案是更改我的 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;
}

菜单 Fullpage.js

Menu Fullpage.js

javascript

jquery

nav

fullpage.js