JavaScript实现选项卡时的小技巧
来源:互联网 发布:考勤系统数据库设计 编辑:程序博客网 时间:2024/05/20 09:07
JavaScript实现选项卡时的小技巧
讲在前面:
创建博客以来一直都是在汲取每一位前辈的干货,很少自己写一些东西,当然自己也在每一位前辈的思想技巧中学到了很多,今天怀着一颗忐忑的心,在这里班门弄斧一般,还请各位前辈批评,指正。
===================================================================内容分割线==========================================================
接下来开始我的班门弄斧,
很多人都在浏览或者编写网页的时候都遇到过选项卡,即点击每个选项就会有相应的内容展示在界面上,很多大神前辈感觉这个可能觉的 so easy, 但是如果是我们这种小白来说
这还是一个不小的挑战,话不多说,开始正题,
当我们遇到这种问题的时候我们首先应该使用HTML+CSS将页面内容写好,其中我觉得只要起作用的还是display属性,其显示属性值为block,隐藏属性值为none
我们可以将他们的两个属性值分别写在连个两个class类中以便于以后JavaScript利用setAttribute()方法相互替换,
.dis{ display: block; } .noe{ display: none; }
选项卡的卡片我们用列表元素来实现 ul>li 而内容块儿 我们理所当然的就选择div啦 当然如果你觉得有更好的选择 你还可以写其他这也表现出html的灵活性,
<div class="content"> <ul id="ul1" class="ul1"> <li id="id" onclick="dis(this)"> 房产 </li> <li id="ie" onclick="dis(this)"> 家具 </li> <li id="ic" onclick="dis(this)"> 二手房 </li> </ul></div><div class="content1"> <p class="dis" id="id1">275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房</p> <p class="noe" id="ie1">40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计</p> <p class="noe" id="ic1">通州豪华3居260万 二环稀缺2居250w甩 西3环通透2居290万 130万2居限量抢购 黄城根小学学区仅260万 121平70万抛! 独家别墅280万 苏州桥2居优惠价248万</p></div>
这里我需要强调一下在li元素和p元素写ID的时候p元素ID的前半部分与li元素的一样
<li id="id" onclick="dis(this)"> 房产 </li><p class="dis" id="id1">
这样方便我们在以后JS部分通过l选项卡(li元素)的ID获取内容(p)的ID
document.getElementById(aa.getAttribute('id') + '1').className = 'dis';
接下来我们重点开始我们的JavaScript的编写
<script type="text/javascript"> //javascript部分. function dis(aa){ var d = document.getElementsByTagName('p') ; for(var i = 0 ; i < d.length; i++){ if(d[i].className == 'dis'){ d[i].className = 'noe' ; } } document.getElementById(aa.getAttribute('id') + '1').className = 'dis'; }</script>
我们通过document.getElementByTagName()方法来获取所有的p元素 反回一个集合,在通过for循环遍历这个集合利用node.className()方法替换class类达到显示的内容隐
藏的效果
最后再利用传入的节点内容通过getAttribute()方法获取到li元素的ID内容‘id’,加上一个字符串“1” 组合成p元素的ID 这样就获取到了相对应的p元素,
document.getElementById(aa.getAttribute('id') + '1').className = 'dis';
将对应的内容显示出来
这样一个简单的选项卡就实现出来了 虽然是一个小Demo 但是却让我大有收获 希望每一个像我一样是一个小白的看了我的这篇能有所收获!这样我也就开心了!嘿嘿。。
1 0
- JavaScript实现选项卡时的小技巧
- Javascript选项卡的实现
- 选项卡的JavaScript实现
- javascript选项卡的实现
- Javascript实现简单的选项卡
- javascript实现的tab选项卡切换
- JavaScript实现的选项卡切换
- 32、JavaScript中选项卡的实现
- javascript实现简单的tab选项卡
- javaScript 的小技巧
- JavaScript的小技巧
- Jquery实现的小案例3、小选项卡
- javascript 实现tab选项卡
- javascript实现选项卡切换
- JavaScript实现选项卡效果
- Javascript实现选项卡功能
- javascript 淘宝右侧小选项卡
- javascript的一些小技巧
- android禁止上下拉菜单
- ASP.NET的Web.Config 节点的属性设置说明
- ASP.NET Web实时消息后台服务器推送技术--GoEasy
- Validatebox 验证框的使用
- BZOJ 2301: [HAOI2011]Problem b(莫比乌斯反演,分块,容斥)
- JavaScript实现选项卡时的小技巧
- eCryptfs - unlink系统调用
- 【NOIP2013提高组T6】华容道-BFS+SPFA
- “Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured
- python27+selenium+Phantomjs登录京东
- 数据结构实验之二叉树一:树的同构
- java工具类mht转html格式文件
- 深入浅出Docker Swarm架构与命令
- C语言程序设计实践-C语言应用实践