案例十九:
注册页面,点击高级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" οnclick="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 οnlοad="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.οnmοuseοver=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 οnlοad="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>