jquery之toggleClass应用
今天记载一下常用的html + css + jquery效果应用
1.html内容
<div class="selBtn screen_btn">
<a id="project1" data-type="1" class="active">筹备期项目</a>
<a id="project2" data-type="2">运营期项目</a>
</div>
2.css内容:
.selBtn a{width: 50%; float: left; text-align: center; box-sizing: border-box; border: solid 0.03125rem #999999; line-height: 1.8125rem;}
.selBtn a.act{background: #ff9600; color: #ffffff; border: solid 0.03125rem #ff9600;}
3.jquery内容
$(function() {
//筛选选择效果
$('.screen_btn a').click(function(){
$(this).toggleClass("active").siblings().removeClass("active");
})
});
注意siblings方法只用作用于同一层级的元素。
jquery之toggleClass应用的更多相关文章
- Jquery中toggleClass的两种用法
css样式: <style type="text/css"> .bgc{ background-color:#F00; color: #FFF} </style& ...
- jquery源码解析:addClass,toggleClass,hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- jQuery基本toggle() toggleClass() 使用
今天来学习一下jQuery的基本函数的使用,很简单. 首先写一个button做控制按钮,然后写一个div用按钮控制idv做动画,从而测试JQuery的动画函数 <head> <met ...
- jQuery toggleClass 源码解读
toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...
- You Don't Need jQuery
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- (转)You might not need jQuery
You might not need jQuery You certainly can support IE 9 and below without jQuery, but we don't. Ple ...
随机推荐
- gradle项目中资源文件的相对路径打包处理技巧
开发java application时,不管是用ant/maven/gradle中的哪种方式来构建,通常最后都会打包成一个可执行的jar包程序,而程序运行所需的一些资源文件(配置文件),比如jdbc. ...
- JS截取字符串
使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子:str=”jpg|bmp|gif|ico|png”;arr=theStr ...
- linux 代码分析工具 gprof - 以wpa_supplicant为例
当我们遇到一个新的程序的时候,经常会无从下手,需要debug一个功能的时候,我们不知道函数的运行流程是怎么样的,这就需要借助工具来帮助我们加快流程了.这里以分析wpa_supplicant为例 ...
- FineUI小技巧(6)自定义页面回发
前言 FineUI中的绝大部分回发事件都是由控件触发了,比如按钮的点击事件,下拉列表的改变事件,表格的排序分页事件.但有时我们可能会要自己触发页面回发,这时就要知道怎么使用 JavaScript 来做 ...
- AsyncTask的初步了解
下面以下载图片并显示为例: 首先我们需要知道的是AsyncTask是对线程池+Handler的进一步封装. 下面看一个简单的代码: public class MainActivity extends ...
- 微信菜单php 数组格式
//备用 $menu['button']['0']['name'] = '积分'; $menu['button']['0']['sub_button']['0']['type'] = 'view'; ...
- hibernate的三表查询
表的关系: Cardgraderule 1:n Cardgrade Cardgrade 1:n Acardtype 实体类: public class C ...
- smarty下如何将一个数保存为两位小数
smarty模板是一种缓存技术,下面介绍一下smarty string_format用法 取小数点后2位: 用法如下: //index.php$smarty = new Smarty; $smarty ...
- python 列表生成式
r = [x*x for x in range(10)] r list类型
- c++/java/python priority_que实现最大堆和最小堆
#include<iostream>#include<vector>#include<math.h>#include<string>#include&l ...