如何实现选项卡切换-白红宇

问题

利用原生js实现选项卡切换效果，如下：

解题思路

打好html框架，即选项卡标题（ul…li…）及内容(div…)；

样式设置，默认显示第一个选项卡标题及内容，显示样式为，选中li的上边框变红，下边框消失。解决思路是设置ul下边框为红色，为li添加类"active"，上边框为红色，下边框为白色，此时li下边框就会覆盖ul下边框，如上图所示。此处需计算li及ul盒模型高度，保持两者一致。

补充js部分代码，实现点击标题页切换对应内容页等效果。解题思路，为每一个li添加鼠标移过事件，遍历li，为其移除"active"类，并为当前li添加"active"， this.classList.add("active")。同时，遍历div内容，全部隐藏，并为当前div移除隐藏classList.remove("hide")，显示对应内容页。

body部分代码


    
        
     房产
    
     家居
    
     二手房
    
        
     
              275万购昌平邻铁三居 总价20万买一居        
      
 200万内购五环三居 140万安家东三环        
      
 北京首现零首付楼盘 53万购东5环50平        
      
 京楼盘直降5000 中信府 公园楼王现房        
      
    
     
    
     
              40平出租屋大改造 美少女的混搭小窝        
      
 经典清新简欧爱家 90平老房焕发新生        
      
 新中式的酷色温情 66平撞色活泼家居        
      
 瓷砖就像选好老婆 卫生间烟道的设计        
      
    
     
    
     
              通州豪华3居260万 二环稀缺2居250w甩        
      
 西3环通透2居290万 130万2居限量抢购        
      
 黄城根小学学区仅260万 121平70万抛!        
      
 独家别墅280万 苏州桥2居优惠价248万        
      
    
     
    
复制代码

CSS部分代码

* {    padding: 0;    font-size: 13px;    width: 230px;    margin: 0 auto;    font: normal 12px "微软雅黑";}.hide {    display: none;    /*默认隐藏后两个标签页 */}li {    display: inline-block;    /*转换为内联块状元素，并排展示li内容 */    border: 1px solid #ccc;    width: 50px;    height: 22px;    border-bottom: none;    margin-left: 5px;}ul {    list-style: none;    /*去除li默认小黑点 */    margin-top: 2px;    width: 232px;    height: 24px;    border-bottom: 2px solid #8a0f0f;}.all {    border: 1px solid rgb(75, 68, 68);    width: 230px;    border-top: none;}.active {    border-top: 2px solid #8B4513;    border-bottom: 2px solid #FFFFFF;    /*默认显示第一个标题页的效果*/}复制代码

CSS难点：盒模型高度计算

保持ul和li高度一致，以免出现如标题下边框没有完全覆盖内容页等情况，影响美观，反例如下：

解决方法：利用浏览器盒模型直观计算比对。

li.active:

ul:

2+22+2=24+2，这样边框就能正确覆盖了。

JS部分代码

// JS实现选项卡切换window.onload = function () {//先加载页面，否则函数无效    change('nav', 'content');}// 当页面需要多次实现选项卡效果，可以对函数进行封装，以实现多次调用。function change(navId, contentId) {    // 切换代码    var nav = document.getElementById(navId);    var liarray = nav.children;    var content = document.getElementById(contentId);    var contentarray = content.children;    for (var i = 0; i < liarray.length; i++) {        liarray[i].index = i;        liarray[i].onmouseover = function () {        //为每一个li添加鼠标移过事件            for (var j = 0; j < liarray.length; j++) {                liarray[j].classList.remove("active");                //遍历liarray，全部删除"active"类            }            this.classList.add("active");            //为当前li添加"active"类            for (var j = 0; j < contentarray.length; j++) {                if (!contentarray[j].classList.contains("hide")) {                    contentarray[j].classList.add("hide")                }            }            contentarray[this.index].classList.remove("hide");        }    }}复制代码

JS难点

如何得到和选项卡标题相匹配的内容页：方法：自定义属性"index"，实现映射

Active 和 remove hide 效果同时实现，注意代码位置