1、html代码

       <div class="col-sm-10 nav nav-tabs" id="typelist" role="tablist">
<label class="radio-inline">
<input type="radio" role="tab" name="type" data-target="#single" checked value="1" aria-selected="true"> 单项服务
</label>
<label class="radio-inline">
<input type="radio" name="type" role="tab" data-target="#mutiple" value="2" aria-selected="false"> 套餐服务
</label>
</div>

2、javasc代码

        $('#typelist input[name="type"]').on("click",function(e){
$('#typelist input[name="type"]').removeClass("active show");
$(this).tab('show');
});

问题:如果不加上移除class的javascript语句的话切换是只能正常显示一次的,而如果是用a标签做tab的话是可以不加移除class就能正常显示的

原因在于什么地方呢?

(暂时未知,有知道的可以留言)

关于Bootstrap 利用radio实现tab切换的一个问题的更多相关文章

  1. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  2. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  3. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  4. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  5. bootstrap中tab切换的使用

    文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...

  6. Bootstrap —— tab切换

    tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

  8. 前端实现Tab切换栏

    tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...

  9. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

随机推荐

  1. HAN模型理解1

    HAN 模型 最开始看这个模型是看的这个解释: RNN+Attention(HAN) 文本分类 阅读笔记 - 今天做作业没的文章 - 知乎 https://zhuanlan.zhihu.com/p/4 ...

  2. B1016 部分A+B (15分)

    B1016 部分A+B (15分) 输入格式: 输入在一行中依次给出 A.DA.B.DB,中间以空格分隔,其中 \(0<A,B<10^10\). 输出格式: 在一行中输出 PA+PB的值. ...

  3. HyperLedger Fabric 1.4 区块链技术形成(1.2)

    在比特币诞生之时,没有区块链技术概念,当人们看到比特币在无中心干预的前提下,还能安全.可靠的运行,比特币网络打开了人们的想象空间:技术专家们开始研究比特币的底层技术,并抽象提取出来,形成区块链技术,或 ...

  4. POJ :3614-Sunscreen

    传送门:http://poj.org/problem?id=3614 Sunscreen Time Limit: 1000MS Memory Limit: 65536K Total Submissio ...

  5. POJ:2139-Six Degrees of Cowvin Bacon

    传送门:http://poj.org/problem?id=2139 Six Degrees of Cowvin Bacon Time Limit: 1000MS Memory Limit: 6553 ...

  6. 第一章:Hello, World!

    感谢作者 –> 原文链接 本文翻译自The Flask Mega-Tutorial Part I: Hello, World! 一趟愉快的学习之旅即将开始,跟随它你将学会用Python和Flas ...

  7. PHP.19-验证码生成

    生成验证码 思路:先定义验证码函数getCode() //绘制验证码 $num = 4; //字符长度 getCode($num, 2); 1.创建画布,分配颜色 imagecreatetruecol ...

  8. Android 人脸识别

    Android人脸识别技术,可以参考下面的网站. http://www.faceplusplus.com.cn/ 本项目使用的就是该网站的api. 项目具体使用的技术代码 /** * 用来压缩图片的方 ...

  9. Pascal小游戏 文件的产生

    一个整人的Pascal小程序 运行之后硬盘里面会有一大堆垃圾,当然更好的方法当然不是这样做! var a,b,c,d:char;beginfor a:='0' to '9' dofor b:='0' ...

  10. 导出csv用excel打开后数字不用科学计数法显示(0123456显示123456)

    从这儿抄过来的: http://zhejiangyinghui.iteye.com/blog/1149526 最近写了一个生成csv的程序,生成的csv其中有一列数字长度为13位,csv中查看没有问题 ...