如何在选项卡窗格 html boostrap 中添加 addclass jQuery function？
[英]How to add addclass jQuery function in tab-pane html boostrap?
问题描述
I have the following html structure
我有以下 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>
This tab is linked to the following tab-content:此选项卡链接到以下选项卡内容：
<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>
I want to create a jQuery function that give me the possibility to, when I click on the sales chart button the fuction add the following class attribute:我想创建一个 jQuery function 让我有可能，当我点击销售图表按钮时，添加以下 class 属性：
<div class="chart tab-pane active " id="sales-chart"
1 个解决方案
解决方案1
1 已采纳 2020-06-30 09:34:15
I don't understand the question very well...我不太明白这个问题...
First, if you use bootstrap tabs, the "show" and "active" classes are moved "automatically" for each tab with the corresponding syntax.首先，如果您使用引导选项卡，“显示”和“活动”类将使用相应的语法为每个选项卡“自动”移动。 See the documentation https://getbootstrap.com/docs/4.0/components/navs/#tabs this is enough to execute a change of panel.请参阅文档https://getbootstrap.com/docs/4.0/components/navs/#tabs这足以执行面板更改。
Instead, if you want to add custom classes to the panel at the time of activation, you can simply intercept the destination of the link and add one or more classes to the destination panel...相反，如果您想在激活时将自定义类添加到面板，您可以简单地截取链接的目标并将一个或多个类添加到目标面板...
Look the example with inspector...看看检查员的例子......
$('.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.