Bootstrap - 打开标签页

代码:

$('#myTab a[href="#profile"]').tab('show')
$('#myTab a:first').tab('show')
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')

首先我们要对元素设置点击事件。

添加点击事件的元素:

<ul class="dropdown-menu" role="menu">
              <li><a href="#">Chrome</a></li>
              <li><a href="#">Safari</a></li>
              <li><a href="#">IE</a></li>
              <li><a href="#">Firefox</a></li>
</ul>

标签页我们需要打开的:

<div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
      </div>

</div>

1.我们给两个父元素设置id,确保好找到。

$(document).ready(function() {

  $("#demo-dropdown a").click(function() {
    var href = $(this).attr("href");
    console.log(href);
    $("#tab-list li a[href= '" + href + "']" ).tab("show");

  });


});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,010评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 鬼节和电闪雷鸣更配哦 被吓醒之后缩在被窝瑟瑟发抖 网易日推真是神奇的所在 推了这首《rain and tears》...
    Alice王志荣阅读 607评论 0 0
  • 生活是一场血雨腥风的厮杀,在社会这个大战场上,你一旦表露出软弱的姿态,周围的就蜂拥而上,像围剿一个猎物一样,瞬间就...
    躲雨De屋檐阅读 150评论 0 2
  • 得了精神分裂症的大堂哥,有一天发病,砍了爷爷坟上的松树,当天我父亲(大堂哥的亲四叔)骑电动车摔到了阴沟里。不知道是...
    阿游笔记阅读 294评论 0 2