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 ...
随机推荐
- 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# ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- js确认删除对话框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Matlab
Q:workspace没有显示变量的值 A:这是因为子程序里的变量是局部变量,他们的作用域就是子函数内部,会在流程控制回到主调函数前被系统自动释放掉,所以,一旦子程序运行完,你是不可能再查看子程序里的 ...
- Android开发:关于WebView
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 ...
- 从基层容器类看万变不离其宗的JAVA继承体系
以容器类为例子,可以观一叶而知秋,看看以前的前辈们是如何处理各种面向对象思想下的继承体系的.读的源代码越多,就越要总结这个继承关系否则读的多也忘得快. 首先摆上一张图片: 看到这张图很多人就慌了,难道 ...
- c# WebClient Get Post 方法
public string GetData(string url) { string data; using (var client = new WebClient()) { using (var s ...
- Java基础-一个java文件多个类的问题
一个.java文件当然可以包括多个类.但这些类有一个特殊的类与其它的不同,,这个类是带public 属性的类.一个.java类文件中仅有一个public属性的类.而且这个类与文件名相同.
- edit界面初始化加默认值
功能名称:modelCreateAction 切入类型:after 事件名称:com.kingdee.bos.eventbus.event.model.ModelCreateEvent package ...
- 修改Firefox的User-Agent,伪装修改秘籍
火狐浏览器修改userAgent的办法一: 在火狐浏览器地址栏输入"about:config",按下回车进入设置菜单. 找到"general.useragent.over ...