快捷導(dǎo)航

bootstrap實現(xiàn)tab選項卡切換

更新時間：2020年08月09日 09:44:59 作者：FinGet_

這篇文章主要為大家詳細介紹了bootstrap實現(xiàn)tab選項卡切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在項目中遇到要實現(xiàn)tab選項卡的關(guān)閉功能，項目中用的bootstrap框架，網(wǎng)上有很多插件，我這里只是簡單的實現(xiàn)了tab選項卡的切換！ <

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
 <title>產(chǎn)品制作</title>
</head>

<body>
 <!--內(nèi)容部分-->
 <div class="qb-content-wrapper">
  <div class="qb-content">
   <!--當前位置-->
   <div class="currentLocation clearfix">
    <span class="pull-left">產(chǎn)品管理 &gt; 產(chǎn)品制作</span>
    <div class="nav-btn pull-right">
     <input type="button" class="btn btn-info" value="桌面">
     <input type="button" class="btn btn-info returnBtn" value="返回">
    </div>
   </div>
   <!--主要內(nèi)容-->
   <div class="container-fluid">
    <div class="row qb-content-wrapper qb-main-content">
     <div class="col-md-12 col-xs-12">
      <ul class="nav nav-tabs tabs" role="tablist">
       <li role="presentation" class="tab-list active">
        <a href="#home" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab">信息檢索
       <i class="fa fa-remove tab-close"></i></a>
       </li>
       <li role="presentation" class="tab-list"><a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile" role="tab" data-toggle="tab">產(chǎn)品制作
       <i class="fa fa-remove tab-close"></i></a>
       </li>
       <li role="presentation" class="tab-list">
        <a href="#home1" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab">信息檢索1
       <i class="fa fa-remove tab-close"></i></a>
       </li>
       <li role="presentation" class="tab-list"><a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile1" role="tab" data-toggle="tab">產(chǎn)品制作1
       <i class="fa fa-remove tab-close"></i></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">
        產(chǎn)品制作
       </div>
       <div role="tabpanel" class="tab-pane" id="home1">
        信息檢索
       </div>
       <div role="tabpanel" class="tab-pane" id="profile1">
        產(chǎn)品制作
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <script></script>
 <script src="js/jquery-1.11.2-min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
 $('.tab-close').on('click', function(ev) {
  var ev=window.event||ev;
  ev.stopPropagation();
  //先判斷當前要關(guān)閉的tab選項卡有沒有active類，再判斷當前選項卡是否最后一個，如果是則給前一個選項卡以及內(nèi)容添加active，否則給下一個添加active類
  var gParent=$(this).parent().parent(),
   parent=$(this).parent();
  if(gParent.hasClass('active')){
   if(gParent.index()==gParent.length){
    gParent.prev().addClass('active');
    $(parent.attr('href')).prev().addClass('active');
   }else{
    gParent.next().addClass('active');
    $(parent.attr('href')).next().addClass('active');
   } 
  }
  gParent.remove();
  $(parent.attr('href')).remove();
 });
 </script>
</body>

</html>

如果大家還想深入學(xué)習(xí)，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: