1、html代码

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

2、javasc代码

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

问题:如果不加上移除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. swoole学习(一)----linux安装swoole

    1.下载swoole 登录swoole官网 https://www.swoole.com/ 点击下载,找到github或者其他链接下载下来 放到虚拟机上. 也可以使用虚拟机下载 2.登录虚拟机 推荐使 ...

  2. python -- configparse读取配置文件

    在开发过程中,有的时候需要将一些参数写入到配置文件中,这样在改动一些相关信息时,可以直接在配置文件中进行修改. 而在python中,可以通过内置模块configparse对标准的配置文件进行读取. 配 ...

  3. POJ 1981 最大点覆盖问题(极角排序)

    Circle and Points Time Limit: 5000MS   Memory Limit: 30000K Total Submissions: 8346   Accepted: 2974 ...

  4. Kubernetes-简介(一)

    简介 Kubernetes是一个开源.用于管理云平台中多个主机上的容器化的应用,目标是让部署容器化的应用简单并且高效,Kuernetes提供了应用部署.规划.更新.维护的一种机制. 在Kubernet ...

  5. L2-032 彩虹瓶 (25 分)

    L2-032 彩虹瓶 (25 分)   彩虹瓶的制作过程(并不)是这样的:先把一大批空瓶铺放在装填场地上,然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里. 假设彩虹瓶里要按顺序装 N 种颜色的小 ...

  6. 購買管理(MM)

    ■購買管理■ [購買伝票]EKKO: ヘッダ EKPO: 明細 EKET: 納入日程行 EKPA: 取引先機能 EKKN: 勘定設定 EKBE: 後続伝票 EKBEH: 削除済み後続伝票履歴 [請求書 ...

  7. PHP代码审计6-实战漏洞挖掘-xdcms用户注册页面漏洞

    xdcms 源码:xdcms v2.0.8 1.配置 [一直下一步(仅为测试)] #数据库账号root,密码为空:管理员账号/密码:xdcms/xdcms #登录后台 2.查看后台登录页面的配置项[x ...

  8. IAR配置ICF到项目的实现方法

    以STM8为例: 将项目使用的MCU型号的icf文件拷贝到项目里面,icf一般放在 C:\Program Files\IAR Systems\Embedded Workbench 6.5\stm8\c ...

  9. linux下创建用户 费元星站长

    linux下创建用户(一) Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系 ...

  10. laravel5.5容器

    目录 1. 比较典型的例子就是 cache 缓存 2. 容器顾名思义,其实就是完成存取过程 2.1 绑定过程 简单绑定 绑定单例 绑定实例 绑定初始数据 2.2 解析过程 容器主要是为了实现控制反转, ...