您的位置：首页 > 其它

练习：超链接的单选效果表格隔行变色

2016-09-12 20:17 344 查看

练习1：超链接的单选效果，页面上有若干个超链接，点击一个超链接的时候，被点击的超链接变为红色，其他的变为白色

<head>

<title>无标题页</title>

<script type="text/javascript">
function initEvent()
{var football=document.getElementById("football");
var lis=football.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
var li=lis[i];
li.onmouseover=function(){
var football=document.getElementById("football");
var lis=football.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
var li=lis[i];
if(li==this){li.style.background="red";}
else {li.style.background="white";}

}
};
li.onclick=function(){
var football=document.getElementById("football");
var lis=football.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
var li=lis[i];
if(li==this){this.style.size=30;}
else {this.style.size="";}

}};
}

}

</script>

</head>

<body onload="initEvent()">

<ul id="football">

<li>曼联</li>

<li>国足</li>

<li>朝鲜队</li>

<li>美国队</li>

<li>伊朗队</li>

</ul>

</body>

</html>

<head>

<title>无标题页</title>

<script type="text/javascript">
function initEvent()
{
var as=document.getElementsByTagName("a");
for(var i=0;i<as.length;i++)
{
var a=as[i];

a.onclick=function(){

var as=document.getElementsByTagName("a");
for(var i=0;i<as.length;i++)
{
var a=as[i];
// windows.event.returnValue=false;
if(a==this){a.style.background="red";}
else {a.style.background="white";}

}
}

}
}

</script>

</head>

<body onload="initEvent()">

<a>曼联</a>

<a>国足</a>

<a>朝鲜队</a>

<a>美国队</a>

<a>伊朗队</a>

</body>

</html>

练习2：表格隔行变色，偶数行为黄色背景，奇数行为默认颜色

<head>

<title>无标题页</title>

<script type="text/javascript">
function showIt()
{
var tableMain=document.getElementById("tableMain");
var trs=tableMain.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++)
{
if(i%2==0)
{
var tr=trs[i];
tr.style.background="yellow";

}

}

}

</script>

</head>

<body >

<table id="tableMain">

<tr><td>123</td><td>12324</td></tr>

<tr><td>3452345</td><td>2346543</td></tr>

<tr><td>43tr</td><td>ergd</td></tr>

<tr><td>dfghf</td><td>vbdtrgher</td></tr>

</table>

<input type="button" value="click" onclick="showIt()"/>

</body>

</html>

练习3：放若干个文本框，获得焦点的文本框为黄色背景，其他控件颜色为白色onfocus onblur

练习4：点击表格行，被点击的行背景是黄色，其他行是白的 onclick

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

练习：超链接的单选效果 表格隔行变色

练习：超链接的单选效果表格隔行变色