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 相关文章推荐
js中数组Array的一些常用方法总结
Aug 12 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue视频播放暂停代码
Nov 08 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
JavaScript静态的动态
2006/09/18 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
酒吧创业计划书
2014/01/18 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
公司辞职信模板
2015/05/13 职场文书
2015入党自传格式范文
2015/06/26 职场文书