Bootstrap data-toggle 的使用

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

html代码:

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#one">第一页</a></li>
  <li><a href="#two">第二页</a></li>
  <li><a href="#three">第三页</a></li>
  <li><a href="#four">第四页</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="one">第一页内容..</div>
  <div class="tab-pane" id="two">第二页内容...</div>
  <div class="tab-pane" id="three">第三页内容..</div>
  <div class="tab-pane" id="four">第四页内容..</div>
</div>

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

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

js:

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值