一个简洁的选项卡菜单

更新时间：2009年07月07日点击数：

<!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>
<title>炫浪设计素材-一个简洁的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
body{
	font-size:12px;color:#333;line-height:20px;font-family:"宋体"
}
ul{
	padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
li{
	padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
ul{
	list-style-type:none
}
li{
	list-style-type:none
}
#login{
	height:172px;
	width:260px;
	margin-bottom:10px;
	border:1px solid #CDDDBD;
	background:#FDFFD7;
}
#login .txt{
	padding:0px 8px;
}
#loginTitle li{
	line-height:26px;
	text-align:center;
	float:left;
	height:31px;
	width:75px;
	padding-top:1px;
	bottom:-1px;
	position:relative;
}
#loginTitle a{
	height:28px;
	width:75px;
	text-decoration:none;
	color:#333;
	display:block;
}
#login1,#login2{
	margin-right:4px;
}
.loginContent{
	background:#fff;
	height:110px;
	border:1px solid #A2C182;
	clear:both;
	width:230px;
	padding:10px 0px 10px 10px;
}
.loginContent img{
	float:left;
	padding:1px;
	margin:7px 7px 0px 5px;
	border:1px solid #ccc;
}
.loginContent ul{
	float:left;
}
.loginContent li{
	padding-left:17px;
	line-height:24px;
	color:#666;
}
.loginContent li.green,.loginContent li.green a{
	background:none;
	color:#690;
}
</style>
</head>
<body>

<script language="JavaScript" type="text/javascript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"current":"";
con.style.display=i==cursel?"block":"none";
}
};
</script>
<div id="login">
  <div class="txt">
    <div id="loginTitle">
      <ul>
        <li id="login1" onmouseover="setTab('login',1,3)" class="current"><span><a href="#" target="_blank">会员中心</a></span></li>
        <li id="login2" onmouseover="setTab('login',2,3)"><span><a href="#" target="_blank">炫浪家园</a></span></li>
        <li id="login3" onmouseover="setTab('login',3,3)"><span><a href="#" target="_blank">炫浪论坛</a></span></li>
      </ul>
    </div>
    <div id="con_login_1" class="loginContent">
      <ul>
        <li><strong>免费</strong>发布本地资讯、分类信息</li>
        <li>吃喝玩乐购，我的地盘，一网打尽！</li>
        <li>泡论坛、逛空间，评商家、开网店！</li>
        <li class="green"><strong><a href="#" target="_blank">登录会员中心</a></strong> | <strong><a href="#" target="_blank">注册通行证</a></strong></li>
      </ul>
    </div>
    <div id="con_login_2" class="loginContent" style="display:none">
      <ul>
        <li>炫浪家园是一个<strong>真实的</strong>社交网络</li>
        <li>真名、真照片、真诚交流</li>
        <li>找到你的“朋友圈”，分享你的快乐！</li>
        <li class="green"><strong><a href="#" target="_blank">登录炫浪家园</a></strong> | <strong><a href="#" target="_blank">注册通行证</a></strong></li>
      </ul>
    </div>
    <div id="con_login_3" class="loginContent" style="display:none">
      <ul>
        <li>炫浪<strong>最大的</strong>生活社区</li>
        <li>时尚生活，休闲娱乐</li>
        <li>快来结交更多的朋友！</li>
        <li class="green"><strong><a href="#" target="_blank">登录炫浪论坛</a></strong> | <strong><a href="#" target="_blank">注册通行证</a></strong></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

赞助商链接

炫友推荐

炫浪推广

【注意】炫浪网版权所有,未经书面授权禁止模仿风格或建立镜像网站.如有违反,追究法律责任.
【声明】本网站部分内容属社区网友发布，本网站仅提供网友交流平台，但有权在本网站范围内引用、发布、
转载来自社区网友发布的内容。网友发布内容纯属个人行为，与本网站立场无关。本网站对于网友发布的
内容所引发的版权、署名权的异议及纠纷，不承担任何责任。粤ICP备11064832号公安备案编号：4453023010550