bootstrap实现tab选项卡切换


Posted in Javascript onAugust 09, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
You might like
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php购物车实现代码
2011/10/10 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP实现文件上传与下载
2020/08/28 PHP
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
原生js开发的日历插件
2017/02/04 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python多进程控制学习小结
2018/10/31 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
买房委托公证书
2014/04/08 职场文书
外贸业务员求职信
2014/06/16 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
高中历史教学反思
2016/02/19 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
关于Vue中的options选项
2022/03/22 Vue.js
Python Pandas解析读写 CSV 文件
2022/04/11 Python