jquery实现单击div切换背景
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3/jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css">
div {
display: block;
} .div1 {
width: 100px;
height: 50px;
background: darkolivegreen;
margin: 10px;
float: left;
} .stylediv {
border: 1px solid red;
background: white;
}
</style> </head> <body> <div class="div1"> </div>
<div class="div1"> </div>
<div class="div1"> </div>
<div class="div1"> </div>
<script type="text/javascript">
$(function() {
$(".div1").click(function() {
$(this).addClass("stylediv").siblings().removeClass("stylediv"); }); });
</script>
</body> </html>
jquery实现单击div切换背景的更多相关文章
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- jquery-11 jquery中的事件切换如何实现
jquery-11 jquery中的事件切换如何实现 一.总结 一句话总结:事件切换hover()和toggle()函数.参数两个,都是函数,依次执行两个函数. 1.如何实现单击切换图片? 用togg ...
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- android Button 切换背景,实现动态按钮和按钮颜色渐变
android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变 1.右键单击项目->new->Oth ...
- jquery - 通过点击切换文字内容
今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...
- 一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览 源码下载 html代码: < ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
随机推荐
- Elasticsearch入门学习重点笔记
原文:Elasticsearch入门学习重点笔记 必记知识点 Elasticsearch可以接近实时的搜索和存储大量数据.Elasticsearch是一个近实时的搜索平台.这意味着当你导入一个文档并把 ...
- webpack学习之—— Manifest
Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...
- 高效整洁CSS代码原则(上)
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...
- React高阶组件 和 Render Props
高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...
- Hdu 1007 最近点对
题目链接 Quoit Design Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Valgrind 初次接触
Valgrind 英文的意思是:堆内存 它有很多小工具,作用各不相同 学习于: http://blog.csdn.net/sduliulun/article/details/7732906 http: ...
- PHP开发api接口安全验证的实例,值得一看
php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道 ...
- 【转载】ubuntu下编写字符设备驱动程序-入门篇
在ubuntu初学驱动,觉得挺有用的. http://www.eefocus.com/jefby1990/blog/13-02/291628_c39b8.html
- java8的stream系列教程之filter过滤集合的一些属性
贴代码 List<Student> lists = new ArrayList<>(); Student student = new Student(); student.se ...
- nginx简单使用
nginx开启./nginx重启./nginx -s reload关闭./nginx -s stop或quit