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
- Table总结
- table总结
- Table边框使用总结
- Table边框使用总结
- table边框设置总结
- Table边框使用总结
- mysql alter table总结
- html table总结
- Jquery操作table总结
- Table单线边框总结
- display:table-cell总结
- table总结insertRow、deleteRow
- table边框显示总结
- snmp table开发总结
- lua中的table总结
- table表格的总结
- lua中table总结
- Table边框的总结
- C#中Delegate委托事件详细介绍
- IMWeb提升营Day1 | 训练题1:有序二维数组的查找
- zabbix3.0 自定义告警邮件内容
- Scrapy爬取百度图片(二)
- 离散题目16 求自反闭包
- Table总结
- pgbouncer配置
- mysql取消大小写区分
- 搜索——codevs1185 幸运数字
- 交换排序
- 手把手教你仿一个知乎日报Android客户端(三)主页面设计
- CDH (cloudeta's distribution for hadoop) 添加节点
- 这 30 类 CSS 选择器,你必须记在脑袋里!
- csdn中如何转载别人的文章