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

短命女 2022-08-10 14:40 5阅读 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">
    
    </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>

用到的图片：bg\_li.gif

![SouthEast][]

[SouthEast]: /images/20220810/11d4cfaa51c44463b966e43f39b047c4.png