Table总结
一、HTML框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
<link rel="stylesheet" type="text/css" href="table2.css" />
<script src="../jquery.js" type="text/javascript"></script><!--引入原生jQuery文件 -->
<script src="table2.js" type="text/javascript"></script><!--引入table.js文件-->
</head>
<body>
<!-- 这里是标签标题 -->
<div class="tabTitle">
<ul>
<li class="current">xhtml</li>
<li>css</li>
<li>jQuery</li>
</ul>
</div>
<div class="tableContent">
<div>xhtml的内容</div>
<div class="hid">css的内容</div>
<div class="hid">jQuery的内容</div>
</div>
</body>
</html>1快速创建三个列表：.table>ul>li*3
- xhtml
- css
- jQuery
2快速创建三个列表：
.tableContent>div*3
<div class="tableContent">
<div>xhtml的内容</div>
<div class="hid">css的内容</div>
<div class="hid">jQuery的内容</div>
</div>二、css样式
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul,li{list-style: none;}
body{
margin: 50px;
}
.hid{
display: none;/*隐藏特定的样式*/
}
.tabTitle ul{
overflow: hidden;/* 清除行之间的浮动 */
_height:1px;/* IE6中的清除浮动的写法 */
}
.tabTitle ul li{
float: left;
border: 1px solid #abcdef;
border-bottom: none;
height: 30px;
line-height: 30px;
padding: 0 15px;/*上下间距0px，左右间距15px */
margin-right: 3px;/* 列之间的距离 */
cursor: pointer;/*鼠标变成手势 */
}
.current0{
background: #abcdef;
color: #fff;
}
.current1{
background: red; /* js中index取值0、1、2，随着index变化table样式改变 */
color: #fff;
}
.current2{
background: green;
color: yellow;
}
.tableContent div{
border: 1px solid #f60;
width: 300px;
height:250px;
padding: 15px;
}三、js的设置
$(function(){
var ali= $('.tabTitle ul li');//获取某行某列设置参数；
var aDiv= $('.tableContent div');//同上；
var timeId= null;//取消时间定时；
ali.mouseover(function(){ //mouseover指的是鼠标经过；而click指的是鼠标点击；
var _this= $(this);
//$(this)就是当前元素
timeId = setTimeout(function(){
_this.addClass(function(){
return 'current'+_this.index();//index指的是第几个兄弟元素
}).siblings('').removeClass();
//$("p").sublings(".selected")表示查找每个p元素的所有类名为“selected”的所有同胞元素；
//removeClass()指的是清除其他同胞元素的所有样式；
//如果想用一组元素控制另一组元素的显示或隐藏，需要用到索引;
var index= _this.index();
aDiv.eq(index).show().siblings().hide();//eq就是索引，控制第index同胞元素的显示；hide（）并把其他同胞元素样式隐藏
},300);//延迟300ms;
}).mouseout(function(event) {
/* Act on the event */
clearTimeout(timeId);//鼠标离开触发取消延时
});
});
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
