标签页tab.js 在栏目之间切换，局部变化

2024年1月10日 179次阅读 来源: fengxiuping

1.在使用bootstrap 中，我们会用到在栏目之间切换，来刷新页面的局部，可以使用下面的方法

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-2">
        <!-- Nav tabs -->
        <ul class="nav nav-pills nav-stacked" id="tab-nav">
          <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
          <li><a href="#profile" data-toggle="tab">Profile</a></li>

        </ul>
    </div>
    <div class="col-md-10">
        <!-- Tab panes -->
        <div class="tab-content" style="margin:20px;background-color:red;height:300px;">
          <div class="tab-pane" id="home">1111</div>
          <div class="tab-pane" id="profile">22222</div>

        </div>
    </div>
<div>
<script>
$('#tab-nav a').click(function (e) {
  e.preventDefault() 
 $(this).tab('show') //使用div来控制页面的切换
;
})
</script>

2.注意

<ul class="nav nav-pills nav-stacked" id="tab-nav"></ul> <!--中的id-->
<li><a href="#profile" data-toggle="tab">Profile</a></li> <!--中的data-toggle属性，herf中的值就是要显示的div的id属性的name-->
    原文作者：fengxiuping
    原文地址: https://segmentfault.com/a/1190000000461373
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞