Javascript 如何在导航栏上动态激活项目-引导
我有4个页面在导航栏上相互引用（index2.html/seite1、seite2、seite3.html）。 我试图在导航栏上找到一个页面来突出显示当前页面，但我只能在一瞬间完成。当我单击时，它会变为红色，但会立即变为默认的“主页”。 这件事我已经坚持了好几天了，我找不到问题所在。标签上有我看不到的环吗？感谢您的帮助Javascript 如何在导航栏上动态激活项目-引导,javascript,html,jquery,navbar,Javascript,Html,Jquery,Navbar,我有4个页面在导航栏上相互引用（index2.html/seite1、seite2、seite3.html）。 我试图在导航栏上找到一个页面来突出显示当前页面，但我只能在一瞬间完成。当我单击时，它会变为红色，但会立即变为默认的“主页”。 这件事我已经坚持了好几天了，我找不到问题所在。标签上有我看不到的环吗？感谢您的帮助 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstr
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar-dark .nav-item > .nav-link.active {
color:white;
background-color: red;
}
</style>
</head>
<body>
<div>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" style="padding-left: 0px;" href="index2.html">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="seite1.html">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite3.html">Page 3</a>
</li>
</ul>
</nav>
</div>
<script>
$('.navbar-nav .nav-link').click(function(){
$ ('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
引导示例
.navbar暗.nav项>.nav-link.active{
颜色：白色；
背景色：红色；
}
-
-
-
-
$（'.navbar nav.nav link'）。单击（函数（）{
$（'.navbar nav.nav link'）.removeClass（'active'）；
$（this.addClass（'active'）；
})