我一直在研究导航栏,并努力了解我收到的一些 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。
谢谢你们。
最佳答案
添加这个 CSS
.text:hover, .active .text {
opacity:1;
transition:0.7s ease;
}
HTML 更改
在选项卡
上添加事件类
<li class="tab active">
关于jquery - 元素上的事件类(导航栏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54460874/