javascript - 使引导垂直导航药丸自动
问题描述
我如何使用 javascript 或 jquery 自动制作 bootstrap 4 垂直导航药丸?
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
解决方案
要自动选择面板(如自动滑块/图像库),您需要假点击每个选项卡(药丸)链接。
基本情况是:
- 在标记中添加一些东西,表明这是一个“标签滑块”。在这种情况下,一个
data-
属性。 - 循环集合并实例化每个选项卡滑块。对于每个选项卡滑块:
- 获取对每个选项卡的引用。
- 计算选项卡 - 与模运算符 (
%1
) 和增量变量一起使用,以确定要显示的面板。 - 创建一个可以重复调用的函数,
setTimeout
通过触发选项卡上的点击事件,将前进到下一个面板。
$( '[data-widget="tab-slider"]' ).each( function ( i, el ) {
const $container = $( this );
const $sliderLinks = $container.find( '.nav-link' );
const panelCount = $sliderLinks.length;
const delay = 3000; // milleseconds
let index = 0;
function nextTabSliderPanel() {
$sliderLinks.eq( index++ % panelCount ).trigger( 'click' );
setTimeout( nextTabSliderPanel, delay );
}
nextTabSliderPanel(); // Start the slider.
} );
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row" data-widget="tab-slider">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Panel</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile Panel</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages Panel</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings Panel</div>
</div>
</div>
</div>
推荐阅读
- graphql - 如何修复“错误:GraphQL 错误:无法读取未定义的属性 'id'”?
- splunk - 根据其他字段的值计算一个字段的值
- c++ - 具有多线程支持的 RenderClass,将函数调用推送到向量以在另一个线程上调用
- swift - Swift SQLite 查询不返回任何结果
- docker - Terraform 不在工作节点上创建 docker 服务
- python - 在多级层次结构 Pandas Dataframe 中更改索引
- elasticsearch - Kibana 服务器还没有准备好
- javascript - 如何在 JavaScript 代码中从 ModelAndView 访问变量
- javascript - 使用 jQuery 删除类时 CSS 转换不起作用
- python - 无法理解逻辑回归模型中的 Sagemaker 代码