Table总结

来源：互联网发布：联通网络解锁助手2017 编辑：程序博客网时间：2024/06/16 08:48

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);//鼠标离开触发取消延时    });});

阅读全文

0 0