• 【原生JS】进阶最后一个编程篇(与之前的选项卡不同的做法)


    完成效果图:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
    /* CSS样式制作 */ 
    *{margin:0; padding:0;}
    div{width:260px; height:100px; padding-top:12px; padding-left:5px; font:13px/20px "微软雅黑"; margin-top:32px; border:1px steelblue solid; border-top:2px darkred solid;}
    .box{width:300px; height:150px; overflow:hidden; margin:100px auto; border:none;}
    .box .ul{list-style:none;}
    .box .ul li:hover{cursor:pointer;}
    .box .ul li{float:left; margin-left:5px; border:1px steelblue solid; border-bottom:none; padding:5px 10px; font:15px/20px "微软雅黑";}
    </style>
        <script type="text/javascript">
        window.onload = function(){
            var li = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
            for(var i=0;i<li.length;i++){
                li[i].onclick = function(){
                    onclicks(this);
                }
            }
            li[0].onclick();
        }
        var index;
        function onclicks(x){
            if(x == index){return;}
            var li = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
            var div = document.getElementsByClassName('div')
            var attribute = parseInt(x.getAttribute('index'));
            for(var z=0;z<3;z++){
                li[z].style.borderTop = '1px steelblue solid';
                li[z].style.borderBottom = 'none';
                div[z].style.display = 'none';
            }
            x.style.borderTop = '2px darkred solid';
            x.style.borderBottom = '2px #fff solid';
            div[attribute].style.display = 'block';
            index = x;
        }
        </script>
    </head>
    <body>
    <!-- HTML页面布局 -->
    <div class="box">
    <ul class="ul">
    <li index="0">房产</li>
    <li index="1">家居</li>
    <li index="2">二手房</li>
    </ul>
    <div class="div">
    275万购昌平邻铁三居 总价20万买一居<br />
    200万内购五环三居 140万安家东三环<br />
    北京首现零首付楼盘 53万购东5环50平<br />
    京楼盘直降5000 中信府 公园楼王现房<br />
    </div>
    <div class="div">
    40平出租屋大改造 美少女的混搭小窝<br />
    经典清新简欧爱家 90平老房焕发新生<br />
    新中式的酷色温情 66平撞色活泼家居<br />
    瓷砖就像选好老婆 卫生间烟道的设计<br />
    </div>
    <div class="div">
    通州豪华3居260万 二环稀缺2居250w甩<br />
    西3环通透2居290万 130万2居限量抢购<br />
    黄城根小学学区仅260万 121平70万抛!<br />
    独家别墅280万 苏州桥2居优惠价248万 <br />
    </div>
    </div>
    
    </body>
    </html>

    不懂的可以在下方评论留言。

    转载请指明出处!
  • 相关阅读:
    Linux磁盘分区(二):删除
    Linux磁盘分区(一):添加
    Linux下查看系统版本号信息的方法
    php计算多个集合的笛卡尔积实例详解
    linux下php7安装memcached、redis扩展
    Linux积累 命令之cat和wc
    php数据结构与算法
    主流PHP框架间的比较(Zend Framework,CakePHP,CodeIgniter,Symfony,ThinkPHP,FleaPHP)
    [深入学习Redis]RedisAPI的原子性分析
    Cookie例子
  • 原文地址:https://www.cnblogs.com/GruntFish/p/6676245.html
Copyright © 2020-2023  润新知