关于Bootstrap 利用radio实现tab切换的一个问题
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切换的一个问题的更多相关文章
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- bootstrap tab切换如何让鼠标移动自动切换内容
bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...
- bootstrap 标签页tab切换js(含报错原因)
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- bootstrap中tab切换的使用
文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...
- Bootstrap —— tab切换
tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- echarts tab 切换问题整理
一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...
- 前端实现Tab切换栏
tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
随机推荐
- thinkPHP5.0 save和saveAll,新增和更新的问题
今天遇到一个问题,在模型中使用save保存数据之后,使用saveAll继续新增数据,结果报 缺少更新条件,网上搜了下发现一篇文章https://www.jianshu.com/p/1848f61de6 ...
- 华为模拟器ensp安装教程
华为模拟器说实话有时候真的是很烦人,总是莫名其妙的出问题,而且网上教程一般也解决不了 因此我认为学会ensp的重装真的很重要,因此只要我们删除干净了,安装最多花不了20分钟的时间 接下来我就来说说怎么 ...
- P1338 末日的传说 逆序数对
题目描述 只要是参加jsoi活动的同学一定都听说过Hanoi塔的传说:三根柱子上的金片每天被移动一次,当所有的金片都被移完之后,世界末日也就随之降临了. 在古老东方的幻想乡,人们都采用一种奇特的方式记 ...
- Pandas 基本技巧
1.数据查看和转置 import numpy as np import pandas as pd # 导入numpy.pandas模块 # 数据查看.转置 df = pd.DataFrame(np.r ...
- POJ:3259-Wormholes(最短路判断负环)
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 58153 Accepted: 21747 Descripti ...
- 初见akka-01
最近在学习akka,在看rpc相关的东西,有点脑子疼,哈哈 1.需求: 目前大多数分布式架构底层通信是通过RPC实现的,RPC框架非常多, 比如我们学过的Hadoop项目的RPC通信框架,但是Hado ...
- Oozie是什么
Apache Oozie Workflow Scheduler for Hadoop Oozie is a workflow scheduler system to manage Apache Had ...
- 网易OpenStack部署运维实战
OpenStack自2010年项目成立以来,已经有超过200个公司加入了 OpenStack 项目,目前参与 OpenStack 项目的开发人员有 17,000+,而且这些数字还在增加,作为一个开源的 ...
- 《算法》C++代码 快速排序
快速排序,简称快排,常称QuickSort.QSort.在排序算法中非常常用,其编程复杂度低,时间复杂度O(NlogN),空间复杂度O(N),执行效率稳定,而且常数很低. 基本思想就是二分,例如你要将 ...
- adb启动和关闭
启动adb服务: cmd("adb start-server"); 关闭adb服务: cmd("adb start-server");