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. P2158 [SDOI2008] (欧拉函数

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  2. python——字符串的操作判断

    s为字符串 s.isalnum()  所有字符都是数字或者字母,为真返回 Ture,否则返回 False. s.isalpha()   所有字符都是字母,为真返回 Ture,否则返回 False. s ...

  3. C# WinForms跨线程更新 UI

    与在Android中一样, 子线程中更新UI被认为是线程不安全的, 会抛出异常. 子线程返回UI线程中更新UI的一个方法为: 1, 捕获应用的UI线程的上下文; 2, 定义线程任务; 3, 定义线程任 ...

  4. 多路复用IO模板

    服务端 from socket import * import select server = socket(AF_INET, SOCK_STREAM) server.bind(('127.0.0.1 ...

  5. 7 定制10MINs首页2

    1.添加 <div class="ui basic segment"> <h1 class="ui center aligned header" ...

  6. Hbase的安装与部署(集群版)

    HBase 部署与使用 部署 Zookeeper 正常部署 $ ~/modules/zookeeper-3.4.5/bin/zkServer.sh start 首先保证 Zookeeper 集群的正常 ...

  7. elasticsearch索引和映射

    目录 1. elasticsearch如何实现搜索 1.1 搜索实例 1.2 es中数据的类型 1.3 倒排索引 1.4 分析与分析器 1.4.1 什么是分析器 1.4.2 内置分析器种类 1.4.3 ...

  8. Pascal小游戏 俄罗斯方块

    俄罗斯方块已经成为了和“Hello World”一样的程序了吧? 不要直接复制,可能需要事先 Format. program cube;uses crt,graph,dos;var gd,gm:sma ...

  9. 使用selenium监听每一步操作

    1.创建类LogEventListener.java, 如下: package com.demo; import org.openqa.selenium.By; import org.openqa.s ...

  10. python之while/for循环

    一.while循环 (一)循环语句 while 后面接判断语句,在返回结果时有以下几种语句: 1.break 仅适用于循环语句,意思是结束最近的循环 2.continue 仅适用于循环语句,意思是跳到 ...