当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用BootStrap实现标签切换原理解析

使用BootStrap实现标签切换原理解析

2019年06月11日  | 移动技术网IT编程  | 我要评论

原理解析

1.定义一无序列表。取id值为mytab。

2.定义列表中a标签的目标地址为我们要展示的div对应的id

3.为a标签注册对应的事件（就是js的代码）

效果如图

这里写图片描述

代码如下

html代码部分

 <ul id="mytab" class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#home" rel="external nofollow" data-toggle="tab">首页</a></li>
    <li role="presentation"><a href="#profile" rel="external nofollow" >介绍</a></li>
    <li role="presentation"><a href="#dropdown1" rel="external nofollow" >消息</a></li>
  </ul>
  <div id="mytabcontent" class="tab-content">
    <div class="tab-pane fade in active" id="home"><p>首页内容..</p> </div>
    <div class="tab-pane fade" id="profile"> <p>介绍内容...</p></div>
    <div class="tab-pane fade" id="dropdown1">
      <p>.消息内容..</p>
    </div>
  </div>

js部分代码

<script type="text/javascript">
   $('#mytab a').click(function (e) {
      e.preventdefault();
      $(this).tab('show');
    });
</script>

以上所述是小编给大家介绍的使用bootstrap实现标签切换原理解析，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网