bootstrap实现tab选项卡切换

2024-10-24 09:29:50

在项目中遇到要实现tab选项卡的关闭功能，项目中用的bootstrap框架，网上有很多插件，我这里只是简单的实现了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>产品制作</title>
</head>

<body>
 <!--内容部分-->
 <div class="qb-content-wrapper">
  <div class="qb-content">
   <!--当前位置-->
   <div class="currentLocation clearfix">
    <span class="pull-left">产品管理 &gt; 产品制作</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>
   <!--主要内容-->
   <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">产品制作
       <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">产品制作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">
        产品制作
       </div>
       <div role="tabpanel" class="tab-pane" id="home1">
        信息检索
       </div>
       <div role="tabpanel" class="tab-pane" id="profile1">
        产品制作
       </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();
  //先判断当前要关闭的tab选项卡有没有active类，再判断当前选项卡是否最后一个，如果是则给前一个选项卡以及内容添加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>

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

很棒的Bootstrap选项卡切换效果

今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了. 先看一下效果图吧,显目一些! 实现代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scal
全面解析Bootstrap中tab（选项卡）的使用方法

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hidee
Bootstrap选项卡动态切换效果

最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给
BootStrap tab选项卡使用小结

选项卡选项卡的基本使用方式为: <ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target=&q
使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &
bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示.  <ul id="myTab" class="nav nav-tabs" role=
简单实现bootstrap选项卡效果

本文实例为大家分享了bootstrap选项卡的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&q
精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)

今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g
bootstrap选项卡扩展功能详解

用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写. 花了几个小时把tabs控件扩展了下.下面是代码页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &l
bootstrap导航、选项卡实现代码

本文实例为大家分享了bootstrap导航和选项卡的具体代码,供大家参考,具体内容如下导航:  <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#">雪碧图</a></li> &

bootstrap实现tab选项卡切换

相关推荐

随机推荐