jquery - 元素上的活动类(导航栏)
问题描述
我一直在研究导航栏,并努力让我的头脑了解我收到的一些 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 更改
class
在 a 上添加 Activetab
<li class="tab active">
推荐阅读
- javascript - 带有 chevron 的 Bootstrap 切换在生产和本地工作中有所不同
- java - Scala 14:错误:单元不带参数
- sql - 计算百分比和计数
- rust - Rust protobuf 序列化都搞砸了
- dart - 如何在 Flutter 上创建像 Skype 这样的 Toast 的 Connection Snackbar?
- excel - Excel 仅汇总特定数字
- ibm-mq - 队列管理器意外结束
- python - pdf到文本的转换
- c# - 在 UI 中等待任务时遇到问题
- c# - 将 UNIQUEIDENTIFIER 列作为主键的 EF 批量插入 SQL Server 表