用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式:
即当选中一个元素时,在此元素下会添加相应的类,以示区别。今天就研究了一下如何用JQuery实现此效果。
1. HTML代码
<a id="med_specialist_1" name="med-specialist" class="med-active">专家门诊1</a>
<a id="med_specialist_2" name="med-specialist">专家门诊2</a>
2. JS代码
//js实现给选中的元素动态添加类 思路:写好要加的类,点击元素时,先移除所有,然后为当前元素添加此类
$(function(){
$('a[name=med-specialist]').on('click', function() {
$('.med-active').removeClass('med-active');
$(this).addClass('med-active');
})
});
总结:先写好你要添加的类的css代码,并给其中一个元素加上此类,当做默认选中元素。给这些元素给相同的name,用于选中此类元素。写点击事件,当点击此类元素时,先将样式移除,然后给当前选中的元素添加样式。
还有一个例子,就是用复选框的样式实现单选功能。可以用css直接去画,将圆形变成方形,但是css功底要比较扎实。以下代码用js实现。
//js实现用复选框的样式实现单选框的效果
$(function(){
var box = document.getElementsByName('med-reg-10-cb');
for(var i=0;i<box.length;i++) {
box[i].onclick=function(){
for(var i=0;i<box.length;i++){
box[i].checked = false;
}
this.checked = true;
}
}
});
页面的html代码就不放了,就是写几个input,type为checkbox,把name都写成js里要得到的就行了。上例中,就是把name都写成'med-reg-10-cb'。
用JQuery动态为选中元素添加/删除类的更多相关文章
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- 向第一个 p 元素添加一个类
This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...
- jquery中为动态增加的元素添加事件
// html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
- 基于jQuery动态创建html元素
在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...
- jQuery动态创建html元素的常用方法汇总
在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...
随机推荐
- iOS7下隐藏status bar的详细研究
info.plist文件中,View controller-based status bar appearance项设为YES,则View controller对status bar的设置优先级高于a ...
- 数据导出到excel
jsp页面: 数据table: <form action="/export.jsp" method="post" id="expform&quo ...
- php递归读取目录
function recursion_dir($dir){ $files = array(); if($handle = opendir($dir)){ while(($file = readdir( ...
- 第K大数
控制数据箱(box.c/cpp/pas)[题目大意]现在给你一个数据箱,支持以下操作,加入元素,第 n次查询操作求当前情况下的第 n 大数.比如说,第 3 次查询操作求第三小的数.当然查询操作的给出方 ...
- LCD相关知识点
1.LCD即液晶显示器,控制原理是控制其中的电子枪,在n行*n列的屏幕上投射不同颜色从而形成图像 2.编程步骤: ①打开LCD背光将LCD背光对应的GPIO设置为禁止上拉(GPxUP相应位写入1),选 ...
- Linux中vim的简单配置
本文主要分享Linux中vim的简单配置 ★配置文件的位置 在目录/etc.下面,有个名为vimrc的文件,这就是系统中公共的vim配置文件,对所有用户都开放.而在每个用户的主目录下,都可以自 ...
- IBM Domino 9 出现 Server Controller 未在主机上运行或未在端口2050监听 解决方案
如果在网上搜索的方法,比如防火墙开端口还没有解决的话,那么我的解决方案可能会解决你的问题. 出现的场景: 我先装了Notes,Designer,后装Domino Server, 配置Domino服务器 ...
- map 容器的使用
C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值. 一.map的说明 1 头文件 #include <map> ...
- JAVA EE的十三种技术
java ee 的十三中技术 一.jdbc 1). jdbc-odbc桥 2). jdbc-native 驱动桥 3). jdbc-network 桥 4). 纯java驱动 二. java命令和目录 ...
- Android中常见功能包描述
在Android中,各种包写成android.*的方式,重要包的描述如下所示:android.app :提供高层的程序模型.提供基本的运行环境android.content:包含各种的对设备上的数据进 ...