javascript简单选项卡，一个页面可多次引用-蒲公英云

javascript简单选项卡，一个页面可多次引用

短命女 2022-08-10 14:40 44阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<script language="javascript" type="text/javascript">
<!--
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>
<style type="text/css">
*{ margin:0; padding:0;}
li{ list-style:none;}
.main{ width:230px; border:solid 1px #e0e0e0; border-width:1px 1px 1px 0; margin:20px;}
.Menubox{
    width:100%;
    height:32px;
    line-height:32px;
}
.Menubox li{
    float:left;
    display:block;
    cursor:pointer;
    width:115px; height:32px;
    text-align:center;
    border:solid 1px #e0e0e0;
    border-width:0 0 1px 0;
    background:url(bg_li.gif) no-repeat left #f9f9f9;
}
.Menubox li.hover{
    width:115px;
    height:33px;
    border-bottom:none;
    color:#ec1c5f;
    font-weight:bold;
    background:url(bg_li.gif) no-repeat left #fff;
}
.Contentbox,.Contentbox1{
    border-left:solid 1px #e0e0e0;
    padding:10px;
    clear:both;
}
</style>
</head>
<body>
<div class="main">
<div class="Menubox">
    <ul>
       <li id="one1" onMouseOver="setTab('one',1,2)"  class="hover">新闻资讯</li>
       <li id="one2" onMouseOver="setTab('one',2,2)">最新动态</li>
    </ul>
</div>
<div class="Contentbox">
     <div class="free_mer1" id="con_one_1" style="display:;">新闻资讯</div>
     <div class="free_mer1" id="con_one_2" style="display:none;">最新动态</div>
</div>
</div>
</body>
</html>