菜單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; 
 
}