jquery table标签切换
来源:互联网 发布:java解析xlsx文件 编辑:程序博客网 时间:2024/06/18 17:42
自己写的(目的参考)
<?php header("content-type:text/html;charset=utf8"); ?><style> ul li{float: left;} li{margin-left: 20px;}</style> <ul id="notice-title"> <li id="notice-">张三</li> <li id="notice-">李四</li> <li id="notice-">王五</li> <li id="notice-">不知道</li> </ul> <div id="notice-con"> <p id="mod" >这是张三的标题 </p> <p id="mod" style="display:none">这是李四的标题</p> <p id="mod" style="display:none">这是王五的标题</p> <p id="mod" style="display:none">这是不知道的标题</p> </div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script type="text/javascript">// alert(123);// function $(id){// return typtof id==='string' ? document.getElementById(id) : id;// }$(document).ready(function(){ // 获取鼠标划过或点击的标签和要切换内容的元素 var titles=document.getElementById("notice-title").getElementsByTagName("li"); var divs=document.getElementById("notice-con").getElementsByTagName("p"); // alert(title.length); if(titles.length!=divs.length) return; for (var i = 0; i < titles.length; i++) { titles[i].id=i; titles[i].onmouseover=function(){ // alert(this.id); //清除所有li上的class for (var j = 0; j < titles.length; j++) { titles[j].className=''; divs[j].style.display='none'; }; //设置当前为高亮显示 this.className='select'; divs[this.id].style.display='block'; } };})</script>
阅读全文
0 0
- jquery table标签切换
- jQuery学习笔记(2)--table标签切换
- jquery-table切换
- jquery标签切换
- jQuery 标签切换
- jQuery切换tab标签
- JQuery 实例:标签切换
- jquery div tab标签切换
- jQuery 实现Tab标签切换
- jquery实现标签切换效果
- jQuery学习笔记--标签切换
- js(jquery) tab标签切换
- javascript(jQuery版)切换table效果自动切换
- jquery 关于table的子标签tbody
- jquery 关于table的子标签tbody
- jquery 查找 table 下的标签
- jquery多图tab标签切换焦点图
- CSS, JavaScript, jQuery实现标签页切换
- Java_18 输入/输出流
- POJ
- hdu 1796 How many integers can you find(容斥原理)
- Unity入门操作_Input_005
- jzoj 3427 归途与征程
- jquery table标签切换
- Number of Battlefields UVA
- spring事务及原理模拟
- Java多线程基础
- hdu3460
- ubuntu环境下搭建和配置使用nginx服务器
- 关于类的反射相关学习
- SHIRO工作流程及原理及在Spring中集成
- 几个coding相关的电子杂志阅读