Tab 选项卡实现
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!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 type="text/javascript">
function setTab(name, cursel, n) {
for (i = 1; i <= n; i++) {
var nav = document.getElementById(name + i);
var conlist = document.getElementById("con_" + name + "_" + i);
nav.className = i == cursel ? "hover" : "";
conlist.style.display = i == cursel ? "block" : "none";
}
}
</script>
<style type="text/css">
*{ margin:0; padding:0; font:12px/18px Arial, Helvetica, sans-serif;}
ul{ list-style:none;}
.tab{ width:600px; margin:50px auto; }
.menubox{ border-bottom:1px solid #060; height:26px;}
.menubox li{ float:left; width:247px; text-align:center; cursor:pointer; border:1px solid #fff; border-bottom:1px solid #060;height:24px; line-height:24px; position:relative; top:1px;}
.menubox li.hover{ border:1px solid #060;border-bottom:1px solid #fff;}
.contentbox{ border:1px solid #060; border-top:none; height:100px; position:relative; top:-1px; text-align:center; padding-top:10px;}
</style>
</head>
<body>
<div class="tab">
<div class="menubox">
<ul>
<li id="a1" onclick ="setTab('a',1,2)" class="hover">邮箱找回密码</li>
<li id="a2" onclick="setTab('a',2,2)" >手机找回密码</li>
</ul>
</div>
<div class="contentbox">
<div id="con_a_1" class="hover">
内容1111
</div>
<div id="con_a_2" style="display:none">
内容222
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号