今天记载一下常用的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. gradle项目中资源文件的相对路径打包处理技巧

    开发java application时,不管是用ant/maven/gradle中的哪种方式来构建,通常最后都会打包成一个可执行的jar包程序,而程序运行所需的一些资源文件(配置文件),比如jdbc. ...

  2. JS截取字符串

    使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子:str=”jpg|bmp|gif|ico|png”;arr=theStr ...

  3. linux 代码分析工具 gprof - 以wpa_supplicant为例

        当我们遇到一个新的程序的时候,经常会无从下手,需要debug一个功能的时候,我们不知道函数的运行流程是怎么样的,这就需要借助工具来帮助我们加快流程了.这里以分析wpa_supplicant为例 ...

  4. FineUI小技巧(6)自定义页面回发

    前言 FineUI中的绝大部分回发事件都是由控件触发了,比如按钮的点击事件,下拉列表的改变事件,表格的排序分页事件.但有时我们可能会要自己触发页面回发,这时就要知道怎么使用 JavaScript 来做 ...

  5. AsyncTask的初步了解

    下面以下载图片并显示为例: 首先我们需要知道的是AsyncTask是对线程池+Handler的进一步封装. 下面看一个简单的代码: public class MainActivity extends ...

  6. 微信菜单php 数组格式

    //备用 $menu['button']['0']['name'] = '积分'; $menu['button']['0']['sub_button']['0']['type'] = 'view'; ...

  7. hibernate的三表查询

    表的关系: Cardgraderule      1:n     Cardgrade Cardgrade           1:n     Acardtype 实体类: public class C ...

  8. smarty下如何将一个数保存为两位小数

    smarty模板是一种缓存技术,下面介绍一下smarty string_format用法 取小数点后2位: 用法如下: //index.php$smarty = new Smarty; $smarty ...

  9. python 列表生成式

    r = [x*x for x in range(10)] r list类型

  10. c++/java/python priority_que实现最大堆和最小堆

    #include<iostream>#include<vector>#include<math.h>#include<string>#include&l ...