js点击什么显示什么的内容,隐藏其它和进度条
点击什么显示什么的内容
<div style="width:200px; height:40px"> <div class="yiji" style="background-color:red;" onclick="Show('g')">公告</div> <div class="yiji" style="background-color:#F96;" onclick="Show('x')">新闻</div> </div> <div class="erji" id="g" style="background-color:red"> <span>wwwwwwwwwwwwwwwww</span> <span>wwwwwwwwwwwwwwwww</span> <span>wwwwwwwwwwwwwwwww</span> <span>wwwwwwwwwwwwwwwww</span> </div> <div class="erji" id="x" style="background-color:#F96; display:none;"> <span>ddddddddddd</span> <span>ddddd</span> <span>sss</span> </div>
css
*{ margin:0px auto; padding:0px; } .yiji{ width:100px; height:40px; float:left; text-align:center; line-height:40px; vertical-align:middle; } .erji{ width:200px; height:200px; }
js
function Show(a) { var a = document.getElementById(a); var e = document.getElementsByClassName("erji"); //回复原样 for(var i=0;i<e.length;i++) { e[i].style.display = "none"; } a.style.display = "block"; }
二、进度条
<div id="kuang"> <div id="jindu" style="width:0px;"></div> </div>
css
#kuang{ width:500px; height:20px; border:1px solid #999; } #jindu{ height:20px; background-color:#3F0; float:left; }
js
Zou(); window.setInterval("Zou()",20); function Zou() { var j = document.getElementById("jindu"); //获取元素的长 var str = j.style.width; //获取宽度里的数字 var cd = str.substr(0,str.length-2); if(cd<500) { cd = parseInt(cd)+2; j.style.width = cd+"px"; } }