Html中tab标签页的实现(3种类型)

最新推荐文章于 2024-04-16 14:54:15 发布

UU_Yang

最新推荐文章于 2024-04-16 14:54:15 发布

阅读量5.7w

点赞数

分类专栏： Web编程

Web编程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

转自：http://hi.baidu.com/zy32002

<!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=gb2312" />

<title>简洁Tab</title>

<style type="text/css">

<!--

body,div,ul,li{

 margin:0 auto;

 padding:0;

}

body{

 font:12px "宋体";

 text-align:center;

}

a:link{

 color:#00F;

 text-decoration:none;

}

a:visited {

 color: #00F;

 text-decoration:none;

}

a:hover {

 color: #c00;

 text-decoration:underline;

}

ul{

 list-style:none;

}

.main{

 clear:both;

 padding:8px;

 text-align:center;

}

/*第一种形式*/

#tabs0 {

 height: 200px;

 width: 400px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

.menu0{

 width: 400px;

}

.menu0 li{

 display:block;

 float: left;

 padding: 4px 0;

 width:100px;

 text-align: center;

 cursor:pointer;

 background: #FFFFff;

}

.menu0 li.hover{

 background: #f2f6fb;

}

#main0 ul{

 display: none;

}

#main0 ul.block{

 display: block;

}

/*第二种形式*/

#tabs1{

 text-align:left;

 width:400px;

}

.menu1box{

 position:relative;

 overflow:hidden;

 height:22px;

 width:400px;

 text-align:left;

}

#menu1{

 position:absolute;

 top:0;

 left:0;

 z-index:1;

}

#menu1 li{

 float:left;

 display:block;

 cursor:pointer;

 width:72px;

 text-align:center;

 line-height:21px;

 height:21px;

}

#menu1 li.hover{

 background:#fff;

 border-left:1px solid #333;

 border-top:1px solid #333;

 border-right:1px solid #333;

}

.main1box{

 clear:both;

 margin-top:-1px;

 border:1px solid #333;

 height:181px;

 width:400px;

}

#main1 ul{

 display: none;

}

#main1 ul.block{

 display: block;

}

/*第三种形式*/

.menu2box{

 position:relative;

 overflow:hidden;

 height:22px;

 width:400px;

 text-align:left;

 background: #FFFFff;

}

#tabs2 {

 height: 200px;

 width: 400px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

#tip2{

 position:absolute;

 top:0;

 left:0;

 height:22px;

 line-height:22px;

 z-index:0;

 width:100px;

 background: #f2f6fb;

}

#menu2{

 position:absolute;

 top:0;

 left:0;

 z-index:1;

}

#menu2 li{

 display:block;

 float: left;

 padding: 4px 0;

 width:100px;

 text-align: center;

 cursor:pointer;

}

-->

</style>

<script>

<!--

/*第一种形式 第二种形式 更换显示样式*/

function setTab(m,n){

 var tli=document.getElementById("menu"+m).getElementsByTagName("li");

 var mli=document.getElementById("main"+m).getElementsByTagName("ul");

 for(i=0;i<tli.length;i++){

  tli[i].className=i==n?"hover":"";

  mli[i].style.display=i==n?"block":"none";

 }

}

/*第三种形式 利用一个背景层定位*/

var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}

function nowtab(m,n){

 if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;

 document.getElementById("tip"+m).style.left=n*100+'px';

 document.getElementById("main2").innerHTML=m3[n];

}

//-->

</script>

</head>

<body>

<br />

<br />

<!--第一种形式-->

<div id="tabs0">

 <ul class="menu0" id="menu0">

  <li οnclick="setTab(0,0)" class="hover">新闻</li>

  <li οnclick="setTab(0,1)">评论</li>

  <li οnclick="setTab(0,2)">技术</li>

  <li οnclick="setTab(0,3)">点评</li>

 </ul>

 <div class="main" id="main0">

  <ul class="block"><li>新闻列表</li></ul>

  <ul><li>评论列表</li></ul>

  <ul><li>技术列表</li></ul>

  <ul><li>点评列表</li></ul>

 </div>

</div>

<br />

<br />

<!--第二种形式-->

<div id="tabs1">

 <div class="menu1box">

  <ul id="menu1">

   <li class="hover" οnmοuseοver="setTab(1,0)"><a href="#">新闻</a></li>

   <li οnmοuseοver="setTab(1,1)"><a href="#">评论</a></li>

   <li οnmοuseοver="setTab(1,2)"><a href="#">技术</a></li>

   <li οnmοuseοver="setTab(1,3)"><a href="#">点评</a></li>

  </ul>

 </div>

 <div class="main1box">

  <div class="main" id="main1">

   <ul class="block"><li>新闻列表</li></ul>

   <ul><li>评论列表</li></ul>

   <ul><li>技术列表</li></ul>

   <ul><li>点评列表</li></ul>

  </div>

 </div>

</div>

<br />

<br />

<!--第三种形式-->

<div id="tabs2">

 <div class="menu2box">

  <div id="tip2"></div>

  <ul id="menu2">

   <li class="hover" οnmοuseοver="nowtab(2,0)"><a href="#">新闻</a></li>

   <li οnmοuseοver="nowtab(2,1)"><a href="#">评论</a></li>

   <li οnmοuseοver="nowtab(2,2)"><a href="#">技术</a></li>

   <li οnmοuseοver="nowtab(2,3)"><a href="#">点评</a></li>

  </ul>

 </div>

  <div class="main" id="main2">

新闻内容

 </div>

</div>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

</body>

</html>

UU_Yang

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
Html中tab标签页的实现(3种类型)

转自：http://hi.baidu.com/zy32002简洁Tab<!--body,div,ul,li{ margin:0 auto; padding:0;}body{ font:12px "宋体"; text-align:center;}a:link{ color:#00F; text-decoration:none;
复制链接

扫一扫