JavaScript的Tab切换
2016-03-31 16:45
477 查看
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法。
先看一下示例代码:
HTML:
两种方法的主要区别是在js代码中,第一种是给每个点击对象一个下标,方便操作:
第二种方法是通过判断点击对象与展示对象的变量值相等时,进行操作。要注意用到关键字this。
先看一下示例代码:
HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0; padding: 0; } #title{ width: 306px; overflow: hidden; margin: 50px auto 0px; } #title h2{ width: 100px; height: 30px; border: 1px solid #000; font-size: 30px; text-align: center; line-height: 30px; float: left; } #con{ width: 304px; border: 1px solid #000; height: 200px; margin: 0 auto; } #con li{ width: 304px; height: 200px; font-size: 40px; color: #ccc; line-height: 200px; text-align: center; list-style: none; display: none; } .select{ background: #ccc; } #con .show{ display: block; } </style> </head> <body> <div id="title"> <h2 class="select" >标题一</h2> <h2>标题二</h2> <h2>标题三</h2> </div> <ul id="con"> <li class="show">内容一</li> <li>内容二</li> <li>内容三</li> </ul> </body> <script></script> </html>
两种方法的主要区别是在js代码中,第一种是给每个点击对象一个下标,方便操作:
<script type="text/javascript"> var title=document.getElementById('title'); var hs=title.getElementsByTagName('h2'); // alert(hs.length); var con=document.getElementById('con'); var lis=con.getElementsByTagName('li'); //for循环的作用是给每一个hs绑定一个点击事件, for (var i = 0; i < hs.length; i++) { hs[i].index=i; hs[i].onclick=function() { // alert(this); for (var v = 0; v < hs.length;v++) { hs[v].className=''; lis[v].className=''; };//清除所有的类名 this.className='select'; lis[this.index].className='show'; }; }; </script>
第二种方法是通过判断点击对象与展示对象的变量值相等时,进行操作。要注意用到关键字this。
<script> var title=document.getElementById('title'); var hs=title.getElementsByTagName('h2'); // alert(hs.length); var con=document.getElementById('con'); var lis=con.getElementsByTagName('li'); for (var` i = 0; i < hs.length; i++) { //第一个for循环是给每一个h2都绑定一个点击事件 hs[i].onclick=function() { for (var v = 0; v < hs.length; v++) { //第二个for循环是去遍历判断哪一个是当前点击的对象 if (hs[v]==this) { hs[v].className='select' lis[v].className='show'; }else{ hs[v].className=''; lis[v].className=''; } } } } </script>
相关文章推荐
- javascript 模板引擎:artTemplate-3.0
- 【BZOJ1016】[JSOI2008]最小生成树计数【最小生成树】【搜索】
- 笔记 Json各种格式解析
- JS面向对象的程序设计
- JS input 文本框事件
- jsp page 提示[page] is not properly terminated
- Observer Pattern in JavaScript II scope declared when subscribe()
- jsp#1简单jsp开发
- jstl中的<fmt:formatNumber>标签
- 关于JavaScript命名空间的一些心得
- [原创作品]Javascript内存管理机制
- phantomjs 安装和试用
- Rhino -- 基于java的javascript实现
- js中关于date()的扩展
- jsp入门学习
- FastJSON、Jackson和Gson用法
- javascript中错误使用var造成undefined
- js的页面初始化,修改div的值,查询多选框的val
- js操作cookie
- 详解JavaScript表单验证(E-mail 验证)