一個JQ Tab标簽切換效果。可多處調用。
<!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>自己動手做個簡單的jquery版table切換,部分注釋</title>
<meta name="keywords" content="jQuery切換,table切換,簡潔輪換效果,有部分注釋" >
<meta name="description" content="站長168,重注前端開發,web前端開發">
<style type="text/css">
body,div,ul,li,a,h1,h2{margin:0;padding:0}/*--使所用到的标簽内外邊距清零，不推薦使用*{margin:0;padding}--*/
ul,li{list-style-type:none}/*--清除清單格式--*/
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}/*--body居中，字型大小行高字型格式顔色，背景--*/
.box{width:200px;height:200px;margin:0 auto;border:1px #ccc solid}/*--border邊框為1個像素灰色的實線邊框--*/
.box_title{width:100%;height:30px;float:left;line-height:30px;background:#ccc}/*--寬100%高30px左浮動行高30px背景灰色--*/
.box_title li{width:50px;float:left;cursor:pointer;text-align:center}/*--寬度50px左浮動移動過去出現手形式内容居中--*/
.box_content{width:100%;height:200px;float:left}
.box_content li{width:100%;float:left}
.cc{width:50px;height:30px;float:left;display:block;color:#3e3e3e;background:#fff}
.j2,.j3,.j4{display:none}
</style>
</head>
<body>
<div class="box">
<ul class="box_title">
<li id="j1" class="cc">1</li>
<li id="j2">2</li>
<li id="j3">3</li>
<li id="j4">4</li>
</ul>
<ul class="box_content">
<li class="j1">1</li>
<li class="j2">2</li>
<li class="j3">3</li>
<li class="j4">4</li>
</ul>
</div>
<div class="box">
<ul class="box_title">
<li id="j1" class="cc">1</li>
<li id="j2">2</li>
<li id="j3">3</li>
<li id="j4">4</li>
</ul>
<ul class="box_content">
<li class="j1">1</li>
<li class="j2">2</li>
<li class="j3">3</li>
<li class="j4">4</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box_title li").mouseover(function(){ //移動到.box_title下的li
$(this).addClass("cc").siblings().removeClass();//移動到當下的li增加樣式.cc其他的不加并移除樣式
$($(this).parent().next().find("li."+$(this).attr("id"))).show().siblings().hide(); //擷取目前的id屬性值與之前的.結合，合成類，顯示，其他隐藏
});
})
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)