临时写了一个 可能不是最好的 但你说的功能基本实现了
<script language="javascript">
document.onreadystatechange=function() //当页面状态改变时执行函数
{
if(document.readyState == "complete") //当页面加载状态为完成时执行条件内容
{
var li = document.getElementsByTagName("li"); //获取页面所有li节点
for(var i=0;i<li.length;i++) //循环li节点
{
li[i].onclick=function(){ //为循环的li节点绑定 onclick事件
for(var j=0;j<li.length;j++)
{
li[j].style.backgroundColor="#FFF"; //将所有li背景颜色修改
this.style.backgroundColor="#C0F"; //将当前点击的li背景颜色修改
}
}
}
}
}
</script>
<ul>
<li>測試1</li>
<li>測試2</li>
<li>測試3</li>
<li>測試4</li>
<li>測試5</li>
<li>測試6</li>
</ul>
刚没注意你还要滑过的效果 以下是全部效果 其实思路都是一样 只是绑定的事件不一样而已
////////////////////////////////////////////////////////////////////////////////////
<script language="javascript">
document.onreadystatechange=function() //当页面状态改变时执行函数
{
if(document.readyState == "complete") //当页面加载状态为完全结束时进入
{
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++)
{
li[i].onclick=function(){ //为循环的li节点绑定 onclick事件 也就是点击事件
for(var j=0;j<li.length;j++)
{
li[j].style.backgroundColor="#FFF";
this.style.backgroundColor="red";
}
}
li[i].onmousemove=function(){ //为循环的li节点绑定onmousemove事件也就是鼠标移上事件
for(var j=0;j<li.length;j++)
{
if(this.style.backgroundColor != "red") //这里就判断改li标签是否被点击 如果点击就不改变颜色
{
this.style.backgroundColor="#C0F";
}
}
}
li[i].onmouseout=function(){ ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件
for(var j=0;j<li.length;j++)
{
if(this.style.backgroundColor != "red") //这里就判断改li标签是否被点击 如果点击就不改变颜色
{
this.style.backgroundColor="#FFF";
}
}
}
}
}
}
</script>
<ul>
<li>測試1</li>
<li>測試2</li>
<li>測試3</li>
<li>測試4</li>
<li>測試5</li>
<li>測試6</li>
</ul>
分享到:
相关推荐
<body>[removed][removed] <ul id="nav"> <li class="current"><a >Puff</a></li> <li><a >Open</a></li> ... 7款基于magic.css来实现,可以制作出非常漂亮的鼠标hover图片效果的CSS3鼠标hover图片动画特效。
CSS3 JS鼠标经过显示二维码和二级菜单特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="css/lanrenzhijia.min.css?3.1.64"> &...
<br>HTML<br>HTML教程<br><br>HTML代码示例<br><br>HTML参考(Reference)<br><br>HTML知识库<br><br>CSS<br>CSS教程<br><br>CSS代码示例<br><br>CSS参考(Reference)<br><br>Javascript<br>Javascript教程<br><br>...
<link rel="stylesheet" href="css/style.css"> </head> <body> <div role="region" aria-label="data table" tabindex="0" class="primary"> <table> <thead> <tr> <th>Col Header</th> <th >2</th> <th>Col...
<link rel="stylesheet" href="css/demo.css?3.1.64"> <... 这是一款简单好看的jQuery CSS3鼠标悬停图片3D翻转动画代码,网格布局显示图片列表,翻转的方向根据鼠标进入图片的方向而定。
title="Link 1"><span>Link 1</span></a></li><br><li><a href="#" title="Link 2"><span>Link 2</span></a></li><br>...<br></ul><br></div><br><br>效果页面,css和html写得很清楚。<br>下载html打包文件<br>
<item><img ></item> <item><img ></item> <item><img ></item> <item><img ></item> <item><img ></item> <item><img ></item> </div> <nav class="tc-btn-container"> <div class="tc-next">NEXT</div> ...
<head> <meta charset="UTF-8"> <title>CSS3 JS鼠标经过显示二维码和二级菜单特效<... 这是一款比较简单实用的基于CSS3 JS实现的鼠标经过显示二维码和二级菜单特效,CSS3鼠标悬停事件代码
<head><title>使用 css 方式</title> <style> h1 {text-align:center; border-bottom:1px solid black;} </style> </head> <body> <h1>一级标题</h1> <p>…其他正文…</p> <h1>一级标题</h1> </body> </html> CSS的...
<h1>3D Rotating Carousel Examples</h1> <h2>Three images</h2> <div class="carousel"> <figure> <img > <img > <img > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav ...
<script type="text/javascript" src="SwooleUI.js"></script> <script type="text/javascript" src="Calendar.js"></script> <script type="text/javascript"> var baidu = new swoole.Dialog('百度一下,你就知道...
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 <template> <section> <div class=box> <ul class=header> <li class=cell>序号</li> <li class=cell>姓名</li> <li ...
<title>CSS3动画手风琴菜单代码</title> <link rel="stylesheet" href="css/style.css?3.1.64"> ... 这是一款带头像的CSS3动画手风琴菜单代码,鼠标悬停个人信息展开显示效果。
--[if lt IE 7]><script src="IE7.js" type="text/javascript"></script><![endif]--><br> 或<br><!--[if lt IE 8]><script src="IE8.js" type="text/javascript"></script><![endif]--><br><br>
;单元2-1 层叠样式表种类;;;;;;;;;...<html> <head> <meta charset="utf-8" /> <title>第一个网页</title> <style> ...</style> ...< link rel=”stylesheet”type=”text/css”href=”外部样式表文件名” >;
<div id="pr-slider" class="dragdealer"> <div class="stripe"> <div id="green-highlight"></div> <div id="orange-highlight"></div> <div id="blue-highlight"></div> <div class="handle"> <div ...
<h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d CSS GLOW</h1> <h1>3d...
<link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <... 鼠标悬停CSS3按钮动画特效是一款通过CSS3 transition和keyframes帧动画实现的鼠标经过按钮动画代码。
EXT中要用到的js包css包和images包 在jsp页面中导入<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/ext-all.css" type="text/css" /> <script language=...