我是该网站的新手，为了进行编码，我试图突出显示活动菜单。我已经搜索了将近两个星期。仍然没有解决。我已经尝试过使用jQuery CDN，它可以工作，但是当我将所有这些都上传到Web时，它不起作用。当我单击菜单时，它突出显示并突然消失。所以它没有成功的jQuery CDN。这是我使用过的jQuery CDN。
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
请帮助。这是我的代码。如果CSS错误，您中的某人可以更正此错误吗？
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<ul class="nav navbar-nav navbar-left-block">
<li><a href="/"><span class="ico"><i class="fas fa-home"></i></span> Home</a></li>
<li class="currentPage"><a>Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-block">
<li class="user-balance"><a href="/addfunds"><span class="ico"><i class="material-icons">attach_money</i></span> <span class="nav-text">$0.00</span><span class="hidden badge" style="background-color: #fea621;">$0.00</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><i class="fas fa-user-cog"></i></span> <span class="nav-text">newuserpanel</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/account">Account</a></li>
<li><a href="/privacy">API</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a href="/"><span class="ico"><img src="/home.png" alt="Home" /></span> Home</a></li>
<li ><a href="services.html"><span class="ico"><img src="/Services.png" alt="Services" /></span> Services</a></li>
<li ><a href="history.html"><span class="ico"><img src="/history.png" alt="History" /></span> history</a></li>
<li ><a href="Support.html"><span class="ico"><img src="/Support.png" alt="Support" /></span> Support</a></li>
<li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>
<li ><a href="/api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
<li ><a href="/terms"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>
</ul>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li ><a href="/"><span class="ico"><img src="home.png" alt="Home" /></span> Home</a></li>
<li ><a href="services.html"><span class="ico"><img src="Services.png" alt="Services" /></span> Services</a></li>
<li ><a href="history.html"><span class="ico"><img src="history.png" alt="Orders" /></span> History</a></li>
<li ><a href="#api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><img src="/dggher5t.png" alt="chaman" /></span> Support <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ><a href="Support.html"><span class="ico"><img src="/Support.png"/></span> Support</a></li>
<li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>
<li ><a href="terms.html"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>
</ul>
</li>
</ul>
</div>
</div>
这是CSS
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
.navbar-collapse.mobileNav{
padding:0;
}
.navbar-collapse.collapse.mobileNav ul.navbar-nav.nav {
display: none;
}
.nav-bottom .nav li.dropdown.open .dropdown-menu a {
background: transparent;
border-radius: 0;
color: #2a1e5e;
}
.dahshat-board .navbar-default .navbar-nav > li > a {
color: #ffffff;
font-size: 14px;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
line-height: 34px;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a {
color: #4d0e88;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a .ico {
background: #480d80;
color: #efe9f5;
border: 1px solid #480d80;
}
.dahshat-board .navbar-default .navbar-nav > li > a:hover,
.dahshat-board .navbar-default .navbar-nav > li > a:focus{
color: #ffffff;
background-color:transparent;
}
.dahshat-board .navbar-default .navbar-nav > .open > a,
.dahshat-board .navbar-default .navbar-nav > .open > a:hover,
.dahshat-board .navbar-default .navbar-nav > .open > a:focus{
background: transparent;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage {
position: relative;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage::before {
content: '/';
color: #ffffff;
display: inline-block;
position: absolute;
top: 17px;
left: 0;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav.navbar-left-block .currentPage::before{
color: #480d80;
}
.navbar-nav li.mobileSearch{
display: none;
}
答案 0 :(得分：0)
以前的CSS太长了，因此我将进行解释。
使用此
$(document).on('click', 'ul li', ...
您可以从任何li元素中选择任何ul元素，例如儿子，孙子等等。应当明智地使用这种选择器，否则您可能会选择不想要的东西。
因此，首先尝试将其更改为
$(document).on('click', 'ul>li', ...
仅选择li个元素的直接子元素ul个元素。
然后，请确保您的CSS规则以具有“活动”类的li元素为目标，以应用您的规则，并且应该成功。
编辑：如果这是您唯一使用Jquery的工具，则可以改用此方法并摆脱Jquery以便在加载页面时节省一些带宽：
let prev = null;
let items = document.querySelectorAll("ul>li");
items.forEach((el)=> el.addEventListener("click", ()=>{
el.classList.add("active");
if(prev) prev.classList.remove("active");
prev = el;
});
我希望这会有所帮助。