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";		
			}	
		}

 

 

posted @ 2018-04-20 08:29  navyyouth  阅读(306)  评论(0编辑  收藏  举报