Javascript I'；我想在my<；中添加一些动态菜单功能；ul>；菜单。

这是JSFIDLE，它是我现在拥有的一个简单版本

我有两个问题似乎无法解决
第一个问题：我希望点在活动页面上时保持填充状态。
第二个问题：我希望在鼠标悬停点时，菜单右侧会出现一个标签

我试过几种方法，在其他设计中我从来没有遇到过这个问题，所以我不知道我应该怎么做。 希望有人能帮我

这是HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>   <a href="#first" class="smoothScroll">Home</a>
<a href="#second" class="smoothScroll">De mogelijkheden</a>
<a href="#third" class="smoothScroll">Restauratie</a>
<a href="#fourth" class="smoothScroll">Het Proces</a>
<a href="#fifth" class="smoothScroll">Werkplaats</a>
<a href="#six" class="smoothScroll">Ambacht en Handwerk</a>
<a href="#seven" class="smoothScroll">Mogelijkheden</a>
<a href="#eight" class="smoothScroll">Contact</a>

    </nav>
</div>
<ul class="content">
    <li class="first" id="first">
    <div id="pagina01"></div>
    <li class="second" id="second">
        <div id="pagina02"></div>
    </li>
    <li class="third" id="third">
        <div id="pagina03"></div>
    </li>
    <li class="fourth" id="fourth">
        <div id="wrapper04">
            <div id="first04"></div>
            <div id="second04"></div>
        </div>
    </li>
    <li class="fifth" id="fifth">
        <div id="pagina05"></div>
    </li>
    <li class="six" id="six">
        <div id="pagina06"></div>
    </li>
    <li class="seven" id="seven">
        <div id="pagina07"></div>
    </li>
    <li class="eight" id="eight">
        <div id="pagina08"></div>
    </li>
</ul>

---

很抱歉代码太长，但我想这可能会使帮助更容易

对于标签，您可以使用CSS3伪元素创建自定义工具提示，使用HTML5的数据标记获取工具提示的内容（文本）

伪元素是：after和：before

要创建标签或工具提示，请尝试将其添加到CSS代码中：

nav a:hover:before {
   pointer-events: none;
   content: attr(data-name);
   position: absolute;
   display: block;
   width: 30px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   color: #FFF;
   background: #000;
   top: -4px;
   right: -40px;
}

…并在您的HTML中添加以下链接：

data name=“此处的文本”

（您可以随意调用数据属性。它只需以

数据-

开头即可）

---

要使点保持填充状态，可以使用jQuery

当您单击

导航a

时，它会将

.active

-类添加到

p.S:
我认为最好将工具提示/标签向左移动，而不是向右移动。现在，由于篇幅太大，无法添加太多文本

希望这有帮助。
如果您想在active上更改颜色，您需要jquery@SurjithSM-不是专门的jquery，而是某种javascript库。@JacquesGoulet同意！！！但是哪一个呢？我还是不太擅长Javascript。。。
nav a:hover:before {
   pointer-events: none;
   content: attr(data-name);
   position: absolute;
   display: block;
   width: 30px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   color: #FFF;
   background: #000;
   top: -4px;
   right: -40px;
}

$(document).ready(function() {

   $('nav a').click(function() {
      $('nav a').removeClass('active');
      $(this).addClass('active');
   });

});