菜单Fullpage.js

Question

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

不过，我的问题是，如何使一个菜单，我试着用：

问题是，当我点击例如在porfolio，没关系，我在第二张幻灯片，但.. ISN “T可能我点击另一个选项卡

（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

Ouuups！我很抱歉无法创建这个帖子..我找到了解决方案。

解决的办法是，改变我的CSS文件。

用，这样的配置：

#menu li { 
 
\t display:inline-block; 
 
\t margin: 10px; 
 
\t color: #000; 
 
\t background:#fff; 
 
\t background: rgba(255,255,255, 0.5); 
 
\t -webkit-border-radius: 4px; 
 
      border-radius: 4px; 
 
} 
 
#menu li.active{ 
 
\t background:#666; 
 
\t background: rgba(0,0,0, 0.5); 
 
\t color: #fff; 
 
} 
 
#menu li a{ 
 
\t text-decoration:none; 
 
\t color: #000; 
 
} 
 
#menu li.active a:hover{ 
 
\t color: #000; 
 
} 
 
#menu li:hover{ 
 
\t background: rgba(255,255,255, 0.8); 
 
} 
 
#menu li a, 
 
#menu li.active a{ 
 
\t padding: 9px 18px; 
 
\t display:block; 
 
} 
 
#menu li.active a{ 
 
\t color: #fff; 
 
} 
 
#menu{ 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t height: 40px; 
 
\t z-index: 70; 
 
\t width: 100%; 
 
\t padding: 0; 
 
\t margin:0; 
 
}