js实现元素添加样式
2015-09-14 11:52
621 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> .red{color:red;} .blue{color:blue;} #w a{display:block;} .red img{display:block!important;} #w a img{display:none;} </style> <body> <div id="w"> <a class="red" title="1">1<img src="" width="100" height="50" alt="1"></a> <a title="2">2<img src="" width="100" height="50" alt="2"></a> <a title="3">3<img src="" width="100" height="50" alt="3"></a> <a title="4">4<img src="" width="100" height="50" alt="4"></a> </div> <script> window.onload=function(){ var oD=document.getElementById("w"); var oA=oD.getElementsByTagName("a"); var oImg=oD.getElementsByTagName("img"); for(var i=0;i<oA.length;i++){ oA[i].onclick=function(){ //onclick--onmouseover for(var i=0;i<oA.length;i++){ if(this.title==oA[i].title){ //if(this==oA[i]) //this(当前点击) //oA[i]循环中被选择 this.className="red"; oImg[i].style.display="block"; } else{ oA[i].className="blue"; oImg[i].style.display="none"; } } }; } }; </script> </body> </html> 类似:http://blog.163.com/fan_yishan/blog/static/4769221320141241517368/
思路有些乱,望指教!
相关文章推荐
- CSS padding margin border
- WPF 绑定集合 根据集合个数改变样式 INotifyCollectionChanged
- 十天学会DIV+CSS(DIV布局)
- css margin
- CSS实现的灰色下拉菜单效果代码
- css 图片垂直居中总结
- CSS实例:用fieldset、legend实现文字写在边线上的效果
- CSS3选择器(二)
- CSS字体中英文名称对照表:如宋体对应SimSun
- 如果删除行内样式中某一个 属性
- animate.css – 齐全的CSS3动画库
- 百度前端笔试题目--css 实现一个带尖角的正方形
- CSS学习笔记——CSS选择器样式总结
- word 文档结构图 字体样式改变,保证有用
- css3实现条纹背景
- CSS居中
- 基于CSS3实现的黑色个性导航菜单效果
- css3常用属性
- JS+CSS实现的简单折叠展开多级菜单效果
- JS+CSS简单树形菜单实现方法