zoukankan      html  css  js  c++  java
  • js点击什么显示什么的内容,隐藏其它和进度条

    点击什么显示什么的内容

    <div style="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{
    				100px;
    				height:40px;
    				float:left;
    				text-align:center;
    				line-height:40px;
    				vertical-align:middle;
    				}
    			.erji{
    				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="0px;"></div>
            </div>
    

     css

    #kuang{
    				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";		
    			}	
    		}
    

     

  • 相关阅读:
    Extended Traffic LightOJ
    SPFA()判环
    Ignatius and the Princess IV HDU 1029
    DNA sequence HDU
    Eight HDU
    哈密顿绕行世界问题 HDU2181
    F
    E
    Hash记录字符串
    无序map 记录一下
  • 原文地址:https://www.cnblogs.com/navyouth/p/8888026.html
Copyright © 2011-2022 走看看