选项卡效果

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 42 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaohui123/p/6672578.html

文章标签：

#xhtml #javascript #ViewUI

选项卡效果

<!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>
<style>
*{ margin:0px auto;
   padding:0px;}
#menu{ width:240px;
       height:30px;}
.list{ width:60px;
       height:30px;
       float:left;
       text-align:center;
       line-height:30px;
       vertical-align:middle;}
.list:hover{ cursor:pointer;}
.nr{ width:240px;
     height:200px;
   text-align:center;
   vertical-align:middle;
   line-height:200px;
   }
</style>
</head>

<body>
<div style="width:700px; height:500px; margin-top:30px;">
    <div id="menu">
         <div class="list" style="娱乐</div>
         <div class="list" style="社会</div>
         <div class="list" style="体育</div>
         <div class="list" style="军事</div>
    </div>
    <div id="d1" class="nr" style="娱乐内容</div>
    <div id="d2" class="nr" style="display:none">社会内容</div>
    <div id="d3" class="nr" style="display:none">体育内容</div>
    <div id="d4" class="nr" style="display:none">军事内容</div>
</div>
</body>
</html>
<script type="text/javascript">
function Show(id)
{ var attr=   document.getElementsByClassName("nr");
for(var i=0; i<attr.length;i++)
    {
   attr[i].style.display="none";
   } document.getElementById(id).style.display="block";
}
</script>