标签页:一个简单的滑动门效果

<script>
var tar=new Array();
tar[0]=new Array("首页","tar1,red");
tar[1]=new Array("给我留言","tar2,blue");
tar[2]=new Array("看看怎么样","tar3,green");
function $(id)
{
  return document.getElementById(id);
}
function setar(id)
{
  var t=$("bb");
  var con=$("content");
  if(id==""){id="tar1";}
  for(j=0;j<tar.length;j++)
  {
    var c=tar[j][1];
    var d=c.split(",");
    if(id==d[0])
    {
      $(id).style.background=d[1];
      $(id).style.color="#fff";
      t.style.background=d[1];
      con.style.border="1px solid "+d[1]+"";
      con.innerHTML=tar[j][0];
    }
    else
    {
      $(d[0]).style.background="#aaa";
      $(d[0]).style.color="#000";
    }
  }
}
</script>
<style type="text/css">
#all{
  margin:0px;
  padding:0px;
  text-align:center;
}
#menu{
  margin:auto;
  width:600px;
  height:20px !important;
  background-color:#fff;
}
#menu ul{
  padding:0px;
  margin:0px;
  list-style-type:none;
  float:left;
  background-color:#aaaaaa;
}
#menu li{
  margin:0px;
  float:left;
  height:15px !important;
  height /**/:20px;
  padding-left:10px;
  padding-right:10px;
  border-right:1px solid #fff;
  padding-top:5px;
  font-size:9pt;
  font-weight:bold;
}
#bb{
  margin:0px auto;
  height:2px;
  font-size:1px;
  line-height:1px;
  width:600px;
}
#content{
  margin:0px auto;
  width:598px !important;
  width /**/:600px;  
  text-align:left;
  height:160px;
}
</style>
<div id="all">
  <div id="menu">
    <ul>
      <script>
        for(i=0;i<tar.length;i++)
        {
          var tarname=tar[i][0];
          var id=tar[i][1].split(",");
          document.write("<li id=\""+id[0]+"\" onclick=\"setar('"+id[0]+"')\">"+tar[i][0]+"</li>");
        }
      </script>
    </ul>
  </div>
  <div id="bb"></div>
  <div id="content">ddd
  </div>
</div>
<script>
setar("tar1");
</script>

文章来自: 本站原创
引用通告地址: http://www.is21.cn/trackback.asp?tbID=489
Tags: