JavaScript实现选项卡时的小技巧
讲在前面:
创建博客以来一直都是在汲取每一位前辈的干货
,很少自己写一些东西,当然自己也在每一位前辈的思想技巧中学到了很多
,今天怀着一颗忐忑的心,在这里班门弄斧一般,还请各位前辈批评,指正。
![微笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
![大笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
===================================================================内容分割线==========================================================
接下来开始我的班门弄斧,
很多人都在浏览或者编写网页的时候都遇到过选项卡,即点击每个选项就会有相应的内容展示在界面上,很多大神前辈感觉这个可能觉的 so easy, 但是如果是我们这种小白来说
这还是一个不小的挑战,话不多说,开始正题,
当我们遇到这种问题的时候我们首先应该使用HTML+CSS将页面内容写好,其中我觉得只要起作用的还是display属性,其显示属性值为block,隐藏属性值为none
我们可以将他们的两个属性值分别写在连个两个class类中以便于以后JavaScript利用setAttribute()方法相互替换,
.dis{
display: block;
}
.noe{
display: none;
}
选项卡的卡片我们用列表元素来实现 ul>li 而内容块儿 我们理所当然的就选择div啦 当然如果你觉得有更好的选择 你还可以写其他这也表现出html的灵活性,
![偷笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif)
<div class="content">
<ul id="ul1" class="ul1">
<li id="id" οnclick="dis(this)">
房产
</li>
<li id="ie" οnclick="dis(this)">
家具
</li>
<li id="ic" οnclick="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" οnclick="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 但是却让我大有收获 希望每一个像我一样是一个小白的看了我的这篇能有所收获!这样我也就开心了!嘿嘿。。