您的位置：首页 > Web前端 > HTML

html tab选项卡

2011-01-14 17:21 169 查看

需要两个文件tab.jsp及tab.css.

1-tab.jsp如下。

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>Tab</title>

<link rel="stylesheet" type="text/css" href="tab.css" />

<script>



</script>

</head>

<body>

<br />

<br />

<div id="tabs">

<ul class="menu" id="menu">

<li onclick="setTab(0)" class="hover">Overview</li>

<li onclick="setTab(1)">Tab2</li>

<li onclick="setTab(2)">Tab3</li>

<li onclick="setTab(3)">Tab4</li>

</ul>

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

<ul class="block"><li>Overview</li></ul>

<ul><li>Tab2</li></ul>

<ul><li>Tab3</li></ul>

<ul><li>Tab4</li></ul>

</div>

</div>

</body>

</html>

2-tab.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;

}

#tabs {

height: 700px;

width: 800px;

border: 1px solid #cbcbcb;

background: #ECF1F8

}

.menu{

width: 800px;

float:left ;

}

.menu li{

display:block;

float: left;

padding: 4px 0;

width:100px;

text-align: center;

cursor:pointer;

background: #CFDDED;

border: thin;

border-color:white;

border-style: solid;

}

.menu li.hover{

background: #ECF1F8 ;

}

#main ul{

display: none;

}

#main ul.block{

display: block;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航