JavaScript实现选项卡时的小技巧

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  但是却让我大有收获   希望每一个像我一样是一个小白的看了我的这篇能有所收获！这样我也就开心了！嘿嘿。。