一个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>