javascript - 单击时导航栏未更新为活动状态
问题描述
我有一个简单的导航栏,我试图在单击时使背景变为绿色。但是,它似乎不起作用。
当我将鼠标悬停在链接上时,背景变为绿色并且工作正常。但是我无法得到它,所以当我点击链接时,背景保持绿色,如果我点击另一个链接,新的活动变为绿色,之前的活动变为白色。
$(".sidebar ul li").on("click", function() {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
<a href="#Welcome">Welcome</a>
</li>
<li class="" id=menu>
<a href="#Authentication">Authentication</a>
</li>
<li class="" id=menu>
<a href="#Pagination">Pagination</a>
</li>
<li class="" id=menu>
<a href="#Errors">Errors</a>
</li>
</ul>
解决方案
我在这里添加了您的代码 - 它似乎工作正常。也许有些东西与您的导航栏重叠?会发生吗?
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
<a href="#Welcome">Welcome</a>
</li>
<li class="" id=menu>
<a href="#Authentication">Authentication</a>
</li>
<li class="" id=menu>
<a href="#Pagination">Pagination</a>
</li>
<li class="" id=menu>
<a href="#Errors">Errors</a>
</li>
</ul>
</div>
推荐阅读
- view - 在颤动中从小部件调用状态类
- python - “配置不当:包含的 URLconf ”
.urls 似乎没有任何模式”在尝试运行服务器时收到 - r - 如何获取所有行的共享和非共享 True 和 false 的数量
- sql - 如何合并具有相似值的两行?
- html - 为什么在 1440 像素宽度的屏幕上查看时,我的社交媒体页脚图标在屏幕外?
- python - 在多个空格但不是单个空格上拆分字符串
- java - 如果条件为真,我如何每秒自动运行一个按钮,直到 de 条件成立?
- github - 在 /blog 目录中安装 Gatsby
- python - 我的 base 10 或一般代码有什么问题
- java - 如何在 TextView 中压倒自动调整大小?