今天记载一下常用的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应用的更多相关文章

  1. Jquery中toggleClass的两种用法

    css样式: <style type="text/css"> .bgc{ background-color:#F00; color: #FFF} </style& ...

  2. jquery源码解析:addClass,toggleClass,hasClass详解

    这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...

  3. jQuery基本toggle() toggleClass() 使用

    今天来学习一下jQuery的基本函数的使用,很简单. 首先写一个button做控制按钮,然后写一个div用按钮控制idv做动画,从而测试JQuery的动画函数 <head> <met ...

  4. jQuery toggleClass 源码解读

    toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...

  5. You Don't Need jQuery

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  6. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  7. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  8. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  9. (转)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 ...

随机推荐

  1. linux tcl expect 安装(转)

    linux tcl expect 安装 一.Tcl安装 1.  下载:tcl8.4.20-src.tar.gz http://www.tcl.tk/software/tcltk/downloadnow ...

  2. 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# ...

  3. socketAPI:一个最简单的服务器和对应的客户端C语言的实现

    基于linux,该实例实现了服务端传了一个hello world给客户端.socket()创建socketbind()绑定socket到IP地址和端口listen()服务器监听客户端的连接connec ...

  4. MySQL大小写补坑记

    背景:由于项目开始时数据库设计经验不足,数据库名和部分数据表名都含有大写字母.但问题是,Linux上数据库名和表名是区分大小写的,而Windows上是不区分大小写的.结果就是在看本地的数据库的时候,对 ...

  5. 对称矩阵、Hermite矩阵、正交矩阵、酉矩阵、奇异矩阵、正规矩阵、幂等矩阵

    2016-01-27 21:03 524人阅读 评论(0) 收藏 举报 分类: 理论/笔记(20) 版权声明:本文为博主原创文章,转载请注明出处,谢谢! 题目:对称矩阵.Hermite矩阵.正交矩阵. ...

  6. Matlab2015基本语句语法04

    1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...

  7. 软件工程(FZU2015)赛季得分榜,第二回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  8. 使用gulp-connect实现web服务器

    安装插件安装gulp-connect插件,安装命令如下 npm install --save-dev gulp-connect 定义web服务,gulpfile.js代码 var gulp = req ...

  9. oracle普通用户登录em

    刚新创建一个用户,登陆EM(Enterprise Manager) 如下提示: 应用程序要求的数据库权限超出了您当前具有的权限.有关特定版本的详细信息, 解决办法: 给登陆用户赋予 select_ca ...

  10. Bioinformatics Glossary

    原文:http://homepages.ulb.ac.be/~dgonze/TEACHING/bioinfo_glossary.html Affine gap costs: A scoring sys ...