我正在创建一个网站，使用html、bootstrap css和jquery。这是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.0">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
<link rel="stylesheet" href="styles.css">
<title>TimeGuard</title>
</head>
<body>
<div class="main">
<div>
<nav class="navbar">
<ul id="firstul" class="nav nav-tabs nav-justified">
<li class="nav-item active" style="width:200px"><a class="nav-link"
href="#dashboard">DASHBOARD</a></li>
<li class="nav-item inactive" style="width:200px;"><a class="nav-link"
href="#reports">REPORTS</a></li>
<li class="nav-item inactive" style="width:500px;"><a class="nav-link"
href="#addict">ADDICT SETTINGS</a></li>
</ul>
</nav>
</div>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane fade show active" role="tab-panel" id="dashboard">
<div>
<h1>OVERVIEW</h1>
<div class="container-fluid box">
<div class="row justify-content-around">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
<div class="overview col-3">
<div style="font-size:79px;">
00
</div>
</div>
</div>
<div class="row justify-content-center" style="margin-top:50px;">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
</div>
</div>
</div>
<div>
<h1>TARGET WEBSITES</h1>
<div class="box container-fluid">
<div class="row justify-content-center">
<div class="tarweb col-7">
TARGET WEBSITES
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" role="tab-panel" id="reports">
<div class="box">
</div>
</div>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
以下是jquery代码，用于在导航选项卡(行车记录仪、报告和添加设置(之间切换。但这一行动并不是在所有标签上都发生的。
$(document).ready(function(){
$("#firstul li.inactive").on("click",function(){
$("#firstul li.active").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
如果有人能帮我，我会很高兴的。
如果需要，这也是CSS代码：
body{
font-family: 'Exo', sans-serif;
}
.main{
background-color:rgb(4, 209, 4);
margin:30px;
border-radius:10px;
padding-top: 0px;
padding-bottom:20px;
}
.navbar{
background-color:white;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
.nav-link{
color:black;
}
li{
font-size:25px;
text-align:center;
}
li.active{
background-color: rgb(4, 209, 4);
color:black;
border:5px double;
border-bottom:none;
}
li.inactive{
background-color: green;
}
.box{
border:1px solid rgb(92, 86, 86);
border-radius:10px;
padding:20px;
}
.overview{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
text-align:center;
}
.tarweb{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
}
试着看看这个条目我不认为移除和添加类是可行的。或者这就是你想要的？
尝试：
$(document).ready(function(){
$("#firstul li").on("click",function(){
$("#firstul li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
解决方案中的问题是没有将单击处理程序添加到活动选项卡项中。在上述解决方案中，我们：
- 将处理程序添加到所有选项卡项
- 单击时，取消激活所有选项卡项目
- 仅激活单击的项目