标签：des style http io ar color 使用 sp java
<!DOCTYPE html>
<html>
<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="jQuery吧,Write Less, Do More,重注前端开发,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}
.active{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" id="box_title">
<li id="j1" class="active">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>
<!--jqyery.js需要自己下载哦-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box_title li").mouseover(function(){ //移动到#box_title下的li
$(this).addClass("active").siblings().removeClass(); //移动到当下的li增加样式.active其他的不加并移除样式
$("."+$(this).attr("id")).show().siblings().hide(); //获取当前的id属性值与之前的.结合，合成类，显示，其他隐藏
});
})
</script>
</body>
</html>
标签：des style http io ar color 使用 sp java
原文地址：http://www.cnblogs.com/zhouyx/p/4112972.html
