如何在选项卡窗格 html 引导程序中添加 addclass jQuery 函数？
Posted
技术标签:
【中文标题】如何在选项卡窗格 html 引导程序中添加 addclass jQuery 函数？【英文标题】：How to add addclass jQuery function in tab-pane html boostrap? 【发布时间】：2020-10-20 13:25:18 【问题描述】：我有以下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" 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" style="height: 300px;"></canvas>
</div>
我想创建一个 jQuery 函数，让我可以在单击销售图表按钮时添加以下类属性：
<div class="chart tab-pane active " id="sales-chart"
【问题讨论】：
你想将“活动”类添加到 div 吗？如果是这样，请看这里getbootstrap.com/docs/4.1/components/navs 它会自动执行您的标签中缺少属性 【参考方案1】：我不太明白这个问题...
首先，如果您使用引导选项卡，“显示”和“活动”类将使用相应的语法为每个选项卡“自动”移动。请参阅文档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" 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" style="height: 300px;"></canvas>
</div>
</div>
</body>
</html>【讨论】：
以上是关于如何在选项卡窗格 html 引导程序中添加 addclass jQuery 函数？的主要内容，如果未能解决你的问题，请参考以下文章