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. JZOJ 3534. 【NOIP2013提高组day1】货车运输

    Description A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的 ...

  2. Python学习之函数参数

    上一节,我们学习了Python中是如何定义和调用函数且如何得到返回值的.在调用函数时,有的函数需要参数来启动函数,有的则无需参数.这一节我们来介绍Python中有哪些参数类型. 位置参数 在调用函数时 ...

  3. Poweroj:2425-跳台阶(经典递推)

    题目链接:https://www.oj.swust.edu.cn/problem/show/2425 跳台阶 Edit Manage Data Rejudge Time Limit: 1000 MS ...

  4. 1,Python常用库之一:Numpy

    Numpy支持大量的维度数组和矩阵运算,对数组运算提供了大量的数学函数库! Numpy比Python列表更具优势,其中一个优势便是速度.在对大型数组执行操作时,Numpy的速度比Python列表的速度 ...

  5. Toolbar中menu菜单文字颜色的修改

    Toolbar菜单中menu当中我们大多数都使用图片来按钮,可是有些时候我们也会直接使用文字,文字的颜色如何修改呢. 其实很简单,我们只要修改styles.xml文件中,添加一句 <item n ...

  6. ADMX Migrator

    实用工具特别推荐ADMX MigratorLance Whitney 下载这篇文章的代码: ADMX Migrator (2765KB) 对于那些 使用组策略的人而言,他们自然非常熟悉如何使用管理模板 ...

  7. Java基础-4变量与数据类型

    变量:变量是Java程序中的一个基本存储单元.变量是一个标识符.类型及一个可选初始值的组合定义.所有的变量都有一个作用域,即变量在某一区域有效. 基本的变量声明方式如下: int a; float b ...

  8. 解决ubuntu发热严重的问题

    对于双显卡PC安装ubuntu ,风扇狂转,发热严重,原因基本双显卡的优化导致. 解决具体步骤如下: 命令行输入sudo apt-get install bumblebee bumblebee-nvi ...

  9. python学习总结---函数使用 and 生成器

    # 函数使用 ### 生成器 - 使用场景 在使用列表时,很多时候我们不会一下子使用全部数据,通常都是一个一个使用,但是当数据量比较大的时候,定义一个大的列表将会是内容使用突然增大.为了解决此类问题, ...

  10. 设计模式之模板方法模式 templateMethod

    代码实现 public abstract class BankTemplateMethod { //具体方法 public void takeNumber(){ System.out.println( ...