点击按钮改变多张图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
li{
 list-style-type: none;
 width: 114px;
 height: 140px;
 background: url(‘./normal.png‘);
 margin-right: 20px;
 float:left;
}

</style>
<script>
 window.onload = function(){
  var aLi = document.getElementsByTagName(‘li‘);　　//得到li元素
  var onOff = true;　　　　//定义一个变量
  for(var i=0;i<aLi.length;i++){
   aLi[i].onOff = true;
   aLi[i].onclickr = function(){
    if (onOff) {　　//　　判断
     this.style.background = "url(./active.png)";　　　　//this 代表  aLi[i]
     onOff = false;　　　　　　//改变变量
       }else{
        this.style.background = "url(./normal.png)";
     onOff = true;
       }
   };
  }
 };
</script>
</head>
 
<body>
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
</body>
</html>

时间： 2024-08-26 02:22:10

点击按钮改变多张图片的相关文章

二、JavaScript之点击按钮改变HTML样式 (CSS)

一.代码如下 二.点击前 三.点击后 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <h2>JavaScript 能够做什么</h2> <p id="demo">JavaScript 能够改变 HTML 元素的样

点击按钮改变状态的颜色

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; min-height: 17.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #e82300 }

Android基础TOP5_4:点击按钮更换样式，设置透明度

在res/drawable创建两个样式 点击前/点击后 round: 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 3 <!--设置渐变颜色 angle="0"是从左到右 90是从上到下 180是从右到左 --> 4 &

点击jQuery Mobile的按钮改变颜色

jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ theme: "b" }); }); 我怎样才能再次单击该按钮返回到正常颜色(C)? 有没有办法看到一个按钮的状态? 因为它是活的,那么你可以只让自己的切换: $('.fav').live('click', function() { var dotoggle = $(this).attr(&

053点击按钮后改变按钮的文字

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UIButton *btnState; 5 6 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController () 4

节点之点击按钮设置div中p标签改变背景颜色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 300px; height: 450px; border: 1px solid red; } </style> </head> <body> <input type="but

初学ToggleButton 点击按钮，更换按钮背景图片；再次点击，恢复之前背景图

上方的图标,R.drawable.register_checked  是选中图片 下方的图标,   R.drawable.register_unchecked 是未选中图片 默认是上方的选中效果.点击按钮,取消选中:再次点击按钮,再次选中. 其实这是两张图片.关键在于图片必须跟着按钮改变. 一开始想用Button实现,纠结了很久,只有按上去和松开的效果,并没有点击后变背景图片的效果. 后来百度了很久,找到可以 用ToggleButton实现我想要的效果,在这里与大家分享. XML: androi

android selector(如对TextView点击样式改变)

selector 1.selector 从单词的意思来说:选择者,选择器,就是对你的目标的控制. 从API来说: A controller for the selection of SelectableChannel objects. Selectable channels can be registered with a selector and get a SelectionKey that represents the registration. The keys are also add

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.