您的位置：首页 > 其它

dom例子七（隔行变色-显示隐藏div-超链接单选）

2012-06-10 16:03 295 查看

案例十九：

注册页面，点击高级checkbox，显示高级选项，否则隐藏

<html>
<head>
<title></title>
<script type="text/javascript">
function toggleDiv(cb){
var div1=document.getElementById("div1");
if(cb.checked){
div1.style.display='';

}else{
div1.style.display='none';

}

}
</script>
</head>
<body>
<input type="checkbox" id="cbshow" onclick="toggleDiv(this)"/>
<label for="cbshow">显示高级选项</label>
<div id="div1" style="display='none'">这里是一些高级选项</div>
</body>
</html>

案例二十：

表格隔行变色。

<html>
<head>
<title></title>
<script type="text/javascript">
function initEvent(){
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
if(i%2==0){
var link=links[i];
link.style.background="yellow";
}else{
var link=links[i];
link.style.background="red";
}
}
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
</body>
</html>

案例二十一：

超链接的单选效果，页面上三个超链接，点击一个超链接的时候

被点击的变为红色背景，未被点击的背景还原为白色

<html>
<head>
<title></title>
<script type="text/javascript">
function initEvent(){
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
var link=links[i];
link.onmouseover=linkClick;
}
}
function linkClick(){
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
var link=links[i];
link.style.background="white";
if(link=this){
link.style.background="red";
}

}
window.event.returnValue=false;

}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com">百度</a><br/>
</body>
</html>

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

标签： 百度 function div

相关文章推荐

新的分享

章节导航