• 第一页
  • 第二页
  • <_bootstrap data-toggle">
    当前位置:   article > 正文

    Bootstrap data-toggle 的使用

    bootstrap data-toggle

    今天在写代码的时候很心塞,之前也经常用这个,然而今天因为疏忽一直无法正常跳转,真的是写代码一点都不能大意啊!

    html代码:

    1. <ul class="nav nav-tabs" id="myTab">
    2. <li class="active"><a href="#one">第一页</a></li>
    3. <li><a href="#two">第二页</a></li>
    4. <li><a href="#three">第三页</a></li>
    5. <li><a href="#four">第四页</a></li>
    6. </ul>
    7. <div class="tab-content">
    8. <div class="tab-pane active" id="one">第一页内容..</div>
    9. <div class="tab-pane" id="two">第二页内容...</div>
    10. <div class="tab-pane" id="three">第三页内容..</div>
    11. <div class="tab-pane" id="four">第四页内容..</div>
    12. </div>

    其中注意,切换按钮用的是ul不是div不要弄错

    接下来是我今天漏掉的地方,呜呜,我竟然忘记了冒泡事件以及单个激活,心塞塞

    js:

    1. $('#myTaba').click(function (e) {
    2. e.preventDefault();
    3. $(this).tab('show');
    4. })

    好啦,更多应用大家可以去官网。以我为例,希望大家以后写代码的时候细心再细心

    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/69452
    推荐阅读
    相关标签