个人中心
gpt4 book ai didi

bootstrap实现tab选项卡切换

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章bootstrap实现tab选项卡切换由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在项目中遇到要实现tab选项卡的关闭功能，项目中用的bootstrap框架，网上有很多插件，我这里只是简单的实现了tab选项卡的切换！ < 。

bootstrap实现tab选项卡切换

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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 >

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

原文链接：https://blog.csdn.net/o_Mario_o/article/details/74852798 。

最后此篇关于bootstrap实现tab选项卡切换的文章就讲到这里了,如果你想了解更多关于bootstrap实现tab选项卡切换的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： C#实现PDF文件添加图片背景
文章推荐： 支付宝咻一咻怎么用 Android帮你实现咻一咻
文章推荐： C#实现带进度条的ListView
文章推荐： Android开发之Animations动画用法实例详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com