Bootstrap4选项卡点击切换事件改为hover鼠标悬停切换效果
2022-01-16 MAPE 3924 本站
如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类,对应选项卡内容的 <div> 元素使用 .tab-content 类 。。
Bootstrap4动态选项卡中有两个JavaScript方法:
1、$().tab('show') <script> $(function () { $('#myTab li:last-child a').tab('show') //控制默认最后一项是激活的 }) </script> 2、$().tab('dispose') //隐藏一个选项卡
Bootstrap4动态选项卡默认切换事件是“click”点击事件,现在切换事件要改为hover事件,也就是鼠标悬停激活选项卡,请看以下例子:
HTML
<div class="container"> <h2>选项卡切换</h2> <br> <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"><br> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="container tab-pane fade"><br> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="container tab-pane fade"><br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div>
JS
<script> $('#myTab a').hover(function(){ $(this).tab('show')}, function (){ $(this).tab('dispose') }) </script>