>我有以下html结构
<ul class="nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#revenue-chart" data-toggle="tab">Storico</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sales-chart" data-toggle="tab">Budget</a>
</li>
</ul>
此选项卡链接到以下选项卡内容：
<div class="tab-content p-0">
<div class="chart tab-pane active" id="revenue-chart"
style="position: relative; height: 300px;">
<canvas class=" w-100 " id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
<div class="chart tab-pane " id="sales-chart"
style="position: relative; height: 300px;">
<canvas class=" w-100 " id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
我想创建一个jQuery函数，当我单击销售图表按钮时，功能可以添加以下类属性：
<div class="chart tab-pane active " id="sales-chart"
我不太明白这个问题...
首先，如果使用引导选项卡，则会使用相应的语法为每个选项卡"自动"移动"show"和"active"类。请参阅文档 https://getbootstrap.com/docs/4.0/components/navs/#tabs 这足以执行面板更改。
相反，如果要在激活时将自定义类添加到面板，只需截获链接的目标并将一个或多个类添加到目标面板...
查看检查器的示例...
$('.nav-link').on('click', function() {
let target = $(this).attr('href');
$(target).addClass('pippo');
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#revenue-chart" data-toggle="tab">Storico</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sales-chart" data-toggle="tab">Budget</a>
</li>
</ul>
<div class="tab-content p-0">
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"> A
<canvas class=" w-100 " id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
<div class="chart tab-pane " id="sales-chart" style="position: relative; height: 300px;"> B
<canvas class=" w-100 " id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
</div>
</body>
</html>