报名工具小程序_bootstrap完成tab选项卡切换

发布时间:2021-01-05 12:00 作者:jianzhan

摘要: bootstrap完成tab选择项卡转换 本文关键为大伙儿详尽详细介绍了bootstrap完成tab选择项卡转换,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴

bootstrap实现tab选项卡切换       这篇文章主要为大家详细介绍了bootstrap实现tab选项卡切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在项目中遇到要实现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 
 div 
 !--当前位置-- 
 div 
 span 产品管理 产品制作 /span 
 div 
 input type="button" value="桌面" 
 input type="button" value="返回" 
 /div 
 /div 
 !--主要内容-- 
 div 
 div 
 div 
 ul role="tablist" 
 li role="presentation" 
 a href="#home" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab" 信息检索
 i /i /a 
 /li 
 li role="presentation" a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile" role="tab" data-toggle="tab" 产品制作
 i /i /a 
 /li 
 li role="presentation" 
 a href="#home1" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab" 信息检索1
 i /i /a 
 /li 
 li role="presentation" a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile1" role="tab" data-toggle="tab" 产品制作1
 i /i /a 
 /li 
 /ul 
 !-- Tab panes -- 
 div 
 div role="tabpanel" id="home" 
 信息检索
 /div 
 div role="tabpanel" id="profile" 
 产品制作
 /div 
 div role="tabpanel" id="home1" 
 信息检索
 /div 
 div role="tabpanel" 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 

如果大家还想深入学习,可以点击两个精彩的专题:

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


  • 魔方网表,不但仅是网页

    模拟题目:魔方网表,不仅仅是网页页面网页页面excel互联网网络服务器,仅仅一个新产品类 魔方网表作为一款数据信息化管理方法方式系统软件手机软件的开发设计设计方案综合服务

  • 云服务器器配备指甚么主

    宵云快报 原创 ·  02-28 11:02  · 警法制造行业创作者 CPU:正中间处理器(central processing unit)作为计算机系统软件手机软件的测算和控制重要,是信息内容內容处理、程序运

  • 一个持续自主创业者的心

    原题目:一个持续自主创业者的心里话:看千篇自主创业老母鸡汤,也不如自身亲身经历一次 小编按:文中创作者姜丰波,2017年以前在老百姓网拼搏过9年。曾建立过一支1两人的精英团

  • 初学者新手必备的企业网

    模拟题目:新手初学者必需的公司企业网站建设基本步骤详尽表明 自媒体平台服务平台生产制造制造行业最近2年早就处心积虑风靡,这一生产制造制造行业的快速发展趋势发展趋势也是

  • 金融业、政务服务等行业

    模拟题目:金融业业、政务服务服务等制造行业区块链链链规定爆发,区块链链链互联网网络服务器该如何选? “区块链链链技术性性的集成化化应用在新的技术性性自主创新和产业链