今天找到一个最好用最灵活的移动菜单，也叫选项卡网页源代码，发到这里

 

首先定义css样式


#topnews{
 width:537px;
 padding:0px;
 margin-top: 5px;
 height: auto;
 clear: both;
}

/*菜单class*/
.topnewsMenubox {
 width:100%;
 height:22px;
 clear: both;
 background-image: url(upload/200909011725313263.gif);
 background-repeat: repeat-x;
 margin-bottom: 1px;
}
.topnewsMenubox ul{
margin:0px;
padding:0px;
}
.topnewsMenubox li{
 float:left;
 display:block;
 cursor:pointer;
 width:95px;
 text-align:center;
 color:#1C527D;
 background-image: url(upload/200909011725321332.gif);
 background-repeat: no-repeat;
 margin-right: 2px;
 margin-left: 2px;
 height: 22px;
 line-height: 22px;
 background-position: -0px -22px;
 margin-bottom: 0px;
 margin-top: 0px;
 font-size: 14px;
}
.topnewsMenubox li.hover{
 width:95px;
 color:#1C527D;
 height:22px;
 line-height:22px;
 background-image: url(upload/200909011725321332.gif);
 background-repeat: no-repeat;
 float: left;
 padding: 0px;
 background-position: 0px 0px;
 font-size: 14px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 2px;
}
.topnewsContentbox{
 clear:both;
 height:220px;
 padding-top:5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #a2caea;
 border-bottom-color: #a2caea;
 border-left-color: #a2caea;
 margin-top: -1px;
}
.topnewsclass {
 float: left;
 height: 22px;
 width: 210px;
 margin-left: 10px;
}


#newsright {
 float: left;
 height: 180px;
 width: 210px;
 margin-top: 5px;
 margin-right: 2px;
 margin-bottom: 2px;
 margin-left: 10px;
 line-height: 150%;
}

 

 

然后是body区的内容

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>

<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
-->
</script>


</head>
<body>
<br><br>
<div id="topnews">
<div class="topnewsMenubox">
<ul>
<li id="nine1" OnMouseOver="setTab('nine',1,2)"  class="hover">医院动态</li>
<li id="nine2" OnMouseOver="setTab('nine',2,2)" >行业动态</li>

</ul>
</div>

<div class="topnewsContentbox">
<div id="con_nine_1" class="hover">
<div class=pickuang1>
            <!--{$GetSlidePicArticle(1010,254,true,0,5,false,false,0,1,307,203,0,5000,-1)}--></div>
   
   <div class=topnewsclass>
            <!--{$GetArticleList(1010,254,true,0,0,1,false,true,"",0,1,1,30,0,false,0,false,false,0,false,false,false,false,false,false,0,1,,,)}--></div>
<div id=newsright>
  <!--{$GetArticleList(1010,254,true,0,0,10,false,false,"",0,1,1,30,0,false,2,false,false,0,false,false,false,false,false,false,0,1,,,)}--></div></div>


<div id="con_nine_2" style="display:none">
<div class=pickuang1>
            <!--{$GetSlidePicArticle(1010,268,true,0,5,false,false,0,1,307,203,0,5000,-1)}--></div>
   
   <div class=topnewsclass>
            <!--{$GetArticleList(1010,268,true,0,0,1,false,true,"",0,1,1,30,0,false,0,false,false,0,false,false,false,false,false,false,0,1,,,)}--></div>
<div id=newsright>
   <!--{$GetArticleList(1010,268,true,0,0,10,false,false,"",0,1,1,30,0,false,2,false,false,0,false,false,false,false,false,false,0,1,,,)}--></div></div>

 

 

</div>
</div>


<br>
</body>
</html>

 

由于时间不多了，先不解释了，使用方便是在于，只需要更改几个div的名字就可以，从头到尾就使用一个js调用就可以了移动菜单