元素上的活动类(导航栏)

Question

我一直在研究导航栏，并努力解决我收到的一些jQuery。

我将在下面发布我的代码，以及指向代码笔（https://codepen.io/JustNayWillo/pen/aXpKbb）的链接，以便您可以更好地理解。

.HTML：

<div id="navbar">
    <li class="tab">
        <a class="link active" href="#home">
            <div class="text">Home</div>
        </a></li>
    <li class="tab">
        <a class="link" href="#work">
            <div class="text">Work</div>
    </a></li>
    <li class="tab">
        <a class="link" href="#about">
            <div class="text">About</div>
    </a></li>
</div>

.CSS：

#navbar {
  position: absolute;
  text-align: right;
  top: 3.5em;
  right: 3.5em;
  z-index: 2;
  list-style-type: none;
}
.tab {
  background-color: white;
  opacity: 0.3;
  height: 3.5em;
  width: 0.2em;
  margin-bottom: 1em;
}
.active, .tab:hover {
  opacity:1;
  transition:0.7s ease;
}
.active, .link:hover {
  opacity:1;
  transition:0.7s ease;
}
.active, .text:hover {
  opacity:1;
  transition:0.7s ease;
}

JS/jQuery：

$(function() {
    var links = $('.tab > .link');
    links.on('click', function() {
        links.closest('.tab').removeClass('active');
        $(this).closest('.tab').addClass('active');
    });
});

一切正常，但是导航不是从活动类开始的，我希望"主页"在开始时处于活动状态。另一个问题是文本不会保持活动状态，仅在悬停时显示，我希望它保持不透明度：活动时为 1。

谢谢大家。

Answer 1

添加此 CSS

.text:hover, .active .text {
  opacity:1;
  transition:0.7s ease;
}

网页更改

在tab上添加活动class

<li class="tab active">

https://codepen.io/anon/pen/yZgExB

Answer 2

在样式中添加此 css

.active .text{
  opacity:1;
}

更新网页

<div id="navbar">
<li class="tab active">
    <a class="link active" href="#home">
        <div class="text">Home</div>
    </a></li>
<li class="tab">
    <a class="link" href="#work">
        <div class="text">Work</div>
</a></li>
<li class="tab">
    <a class="link" href="#about">
        <div class="text">About</div>
</a></li>

更新脚本

 $(function() {
     var links = $('.tab > .link');
    links.on('click', function() {
       $('#navbar').find('.active').removeClass('active');
       $(this).closest('.tab').addClass('active');
       $(this).closest('.link').addClass('active');
    });
 });