【发布时间】：2020-06-20 15:51:10
【问题描述】：
我是这个网站的新手，为了编码，我试图突出显示活动的菜单项。我已经搜索了将近两个星期，但仍然没有解决。我尝试过使用 Jquery CDN；它有效，但是当我将所有这些上传到网络时，它不起作用。当我单击菜单时，它会突出显示，然后突然消失。所以它不适用于 Jquery CDN。这是我用来链接到 Jquery CDN 的 script 标签。
<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>
这是一个演示问题的 CodePen：https://codepen.io/lukeroy/pen/PoZWpKm
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New order</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body class="dahshat-board">
<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">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" ><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">FAQ</a></li>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" ><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</ul>
</div>
</div>
<!-- Main variables *content* -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
$("#toi").click(function(e) {
e.preventDefault();
$("#main-wrap").toggleClass("launched");
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$(".mobileSearch a").click(function(e){
e.preventDefault();
$(".search-bar").toggleClass("toggleSearch");
});
} else {
$('#main-wrap').addClass('launched');
}
/*$(window).scroll(function() {
var nav = $('#scrollNav');
if ($(window).scrollTop() >= 10) {
nav.addClass('fixedNav');
} else {
nav.removeClass('fixedNav');
}
});*/
</script>
</body>
</html>
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;
}
【问题讨论】：
标签： javascript html jquery css twitter-bootstrap