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 ...
随机推荐
- linux tcl expect 安装(转)
linux tcl expect 安装 一.Tcl安装 1. 下载:tcl8.4.20-src.tar.gz http://www.tcl.tk/software/tcltk/downloadnow ...
- The week in .NET - 1/12/2015
On.NET Last week, we had Mads Torgersen on the show to talk about language design in general, and C# ...
- socketAPI:一个最简单的服务器和对应的客户端C语言的实现
基于linux,该实例实现了服务端传了一个hello world给客户端.socket()创建socketbind()绑定socket到IP地址和端口listen()服务器监听客户端的连接connec ...
- MySQL大小写补坑记
背景:由于项目开始时数据库设计经验不足,数据库名和部分数据表名都含有大写字母.但问题是,Linux上数据库名和表名是区分大小写的,而Windows上是不区分大小写的.结果就是在看本地的数据库的时候,对 ...
- 对称矩阵、Hermite矩阵、正交矩阵、酉矩阵、奇异矩阵、正规矩阵、幂等矩阵
2016-01-27 21:03 524人阅读 评论(0) 收藏 举报 分类: 理论/笔记(20) 版权声明:本文为博主原创文章,转载请注明出处,谢谢! 题目:对称矩阵.Hermite矩阵.正交矩阵. ...
- Matlab2015基本语句语法04
1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...
- 软件工程(FZU2015)赛季得分榜,第二回合
目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...
- 使用gulp-connect实现web服务器
安装插件安装gulp-connect插件,安装命令如下 npm install --save-dev gulp-connect 定义web服务,gulpfile.js代码 var gulp = req ...
- oracle普通用户登录em
刚新创建一个用户,登陆EM(Enterprise Manager) 如下提示: 应用程序要求的数据库权限超出了您当前具有的权限.有关特定版本的详细信息, 解决办法: 给登陆用户赋予 select_ca ...
- Bioinformatics Glossary
原文:http://homepages.ulb.ac.be/~dgonze/TEACHING/bioinfo_glossary.html Affine gap costs: A scoring sys ...