javascript控制的页面元素的功能很强大,如果再加上CSS样式单对元素的表现方式进行控制,将会产生丰富多彩的效果。
接下来以控制连接颜色的方式来演示:
当点击链接的时候,当前链接css样态改变
/***静态页面test_link_css.htm****/:
<head>
<style>
a {
color: #FFFFFF;
text-decoration: none;;
font-family: 宋体, Verdana, Tahoma, 宋体;
}
a:link {
text-decoration: none;
color: #FFFFFF;
font-family: 宋体, Verdana, Tahoma, 宋体;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
font-family: 宋体, Verdana, Tahoma, 宋体;
}
a:hover {
text-decoration: none;
color: #CCCCCC;;
font-family: 宋体, Verdana, Tahoma, 宋体;
}
a:active {
text-decoration: none;
color: #CCCCCC;;
font-family: 宋体, Verdana, Tahoma, 宋体;
}
/*动态改变元素*/
#change{
color: green;
board: 1px solid green;
}
</style>
<scirpt>
function changeAcolor(a){
turnAdown();
a.id="change";
}
function turnAdown(){
elements=document.getElementsByTagName("a");
for(var i=0;i<elements.length;i++){
ta=elements[i];
ta.id="d";
}
}
</script>
</head>
<body>
<div id="CD2Child" class="child">
<a href=#' οnclick='changeAcolor(this)'>管理</a><br>
<a href=#' οnclick='changeAcolor(this)'>网络</a><br>
<a href=#' οnclick='changeAcolor(this)'>服务</a><br>
</div>
</body>