登录 注册 SuperSlide - Tab切换效果

SuperSlide - Tab切换效果

引用文件

<script type="text/javascript" src="../jquery1.42.min.js"></script>
<script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>

css部分

/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体;  }
a{ text-decoration:none; color:#333;  }
a:hover{ color:#1974A1;  }


/* 注册\登录 切换css */
.slideTxtBox{ width:450px; text-align:left;  }
.slideTxtBox .hd{height:30px;line-height:30px; padding:0 10px 0 20px;   position:relative; }
.slideTxtBox .hd ul{ float:left;  position:absolute; left:20px; top:-1px; height:32px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px;  background:#f43d19; border:1px solid #ddd; color: #fff;}
.slideTxtBox .bd ul{ margin-top: 10px;padding:15px;  zoom:1;width: 180px;height: 200px; border:1px solid #ddd; }
.slideTxtBox .bd li{ height:24px; line-height:24px;   }

html

<div class="slideTxtBox">
	<div class="hd">
		<ul><li>登录</li><li>注册</li></ul>
	</div>
	<div class="bd">
		<ul>
				第一个板块
		</ul>
		<ul>
				第二个板块
		</ul>
	</div>
</div>
<script type="text/javascript">jQuery(".slideTxtBox").slide({trigger:"click"});</script>

效果展示