练习例题（进度条效果和选项卡效果）

最新推荐文章于 2024-09-26 01:42:12 发布

weixin_34192732

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jgjk/p/7147674.html

版权

进度条效果

<style type="text/css">
*{
    margin:0px auto;
    padding:0px;
    }
#wai{
    width:100px;
    height:20px;
    margin-top:100px;
    border:1px solid #000;
    }
#nei{
    width:0%;
    height:20px;
    float:left;
    background-color:#00F;
    }
</style>
</head>

<body>
<div id="wai">
   <div id="nei">
   </div>
   <br />
   <br />
   <input type="button" value="点击" οnclick="zou()" />
</div>
</body>
<script type="text/javascript">
var a=0;
function zou(){
    if(a<100){
        a++;
        }

    document.getElementById("nei").style.width=a+"%";
    window.setTimeout("zou()",100);
}
</script>

<style type="text/css">
*{
    margin:auto;
    padding:0px;}
#index_wai{
    width:800px;
    height:500px;
    }
#index_liebiao{
    width:100%;
    height:50px;
    }
.list{
    width:100px;
    height:50px;
    float:left;
    }
.item{
    width:100%;
    height:400px;
    }
</style>
</head>

<body>
<div id="index_wai">
   <div id="index_liebiao">
      <div class="list" οnclick="show('one')" style="background-color:#0FF"></div>
      <div class="list" οnclick="show('two')" style="background-color:#0F0"></div>
      <div class="list" οnclick="show('three')" style="background-color:#FF0"></div>
      <div class="list" οnclick="show('four')" style="background-color:#F0F"></div>
   </div>
   <div class="item" id="one" style="background-color:#0FF"></div>
   <div class="item" id="two" style="background-color:#0F0; display:none"></div>
   <div class="item" id="three" style="background-color:#FF0; display:none"></div>
   <div class="item" id="four" style="background-color:#F0F; display:none"></div>
</div>
</body>
<script type="text/javascript">
function show(id){
  var d=document.getElementsByClassName("item");
  for(var i=0;i<d.length;i++){
     d[i].style.display="none"; 
  }
  document.getElementById(id).style.display="block";
}
</script>