bootstrap實現(xiàn)tab選項卡切換的方法是什么

發(fā)布時間：2020-08-10 09:41:23 來源：億速云閱讀：366 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)bootstrap實現(xiàn)tab選項卡切換的方法是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

在項目中遇到要實現(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>

感謝各位的閱讀！關(guān)于bootstrap實現(xiàn)tab選項卡切換的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

bootstrap實現(xiàn)tab選項卡切換的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽