【Javascript】进阶之选项卡在项目中的运用

描述: 鼠标移入不同板块, 显示对应板块的内容, 不移入的时候为默认板块, 所有数据存储在JSON文件中, 通过AJAX获取

代码实例

HTML

    <!-- online course -->
            <div class="onlinecourse clearfix">
                 <!-- title -->
                 <h3 class="fl">精品网课</h3>
                 <ul class="type fl" id = "onlinetype">
                     <li attr = "onlineSell"><a href="#">互联网营销</a></li>
                     <li attr = "styleDesign"><a href="#">设计</a></li>
                     <li attr = "web"><a href="#">Web前端</a></li>
                     <li attr = "program"><a href="#">程序开发</a></li>
                     <li attr = "office"><a href="#">Office</a></li>
                 </ul>
                 <div class="more fr">
                     <a href="#" class = "fl">更多</a>
                     <i class = "iconfont icon-jiahao1 fl"></i>
                 </div>
                 <div style="clear: both;"></div>

                <ul class="onlinecontent" attr = "onlineSell"></ul>
                <ul class="onlinecontent" attr = "styleDesign"></ul>
                <ul class="onlinecontent" attr = "web"></ul>
                <ul class="onlinecontent" attr = "program"></ul>
                <ul class="onlinecontent" attr = "office"></ul>
                <ul class="onlinecontent active" attr = "default">
                    <li>
                        <a href="#">
                            <img src="./img/online-default-1.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【基础】微信视频号运营技巧, 短视频赚钱新风口
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>1</span>
                           <span class = "length fr">1课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-2.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【OAO训练营】软件测试工程师OAO训练营
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>16800</span>
                           <span class = "length fr">383课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-3.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【OAO训练营】2020Web前端开发训练营
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>18800</span>
                           <span class = "length fr">493课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-4.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【OAO训练营】2020Python开发+人工智能OAO训练营
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>19800</span>
                           <span class = "length fr">340课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-5.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【OAO训练营】优就业精品VIP
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>1280</span>
                           <span class = "length fr">200课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-6.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【进阶】抖音自媒体电商+私域流量变现
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>2399</span>
                           <span class = "length fr">16课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-7.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【直播】计算机二级Office备考冲分
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>0.10</span>
                           <span class = "length fr">9课时</span>
                        </p>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/online-default-8.jpg" alt="">
                        </a>
                        <a href="#" class = "desc">
                           【直播+录播】SEO与网站运营实战-网站建设与优化实操演练
                        </a>
                        <p class = "detail clearfix">
                           <span class = "price"><b>￥</b>2999</span>
                           <span class = "length fr">56课时</span>
                        </p>
                    </li>
                </ul>
            </div>

css

.container .onlinecourse{
    margin-top: 50px;
    position: relative;
    width: 100%;
    height: 566px;
}
.container .onlinecourse > h3{
    height: 25px;
}
.container .onlinecourse .type{
    margin-left: 57px;
}
.container .onlinecourse .type li{
    float: left;
    margin: 5px 25px 0 0;
    padding-bottom: 5px;
    
}
.container .onlinecourse .type li > a{
    font: 16px/1 "微软雅黑";
    color: #333333;
    display: inline-block;
}
/* .container .onlinecourse .type li:hover{
    border-bottom: 1px solid #FD5843;
}*/
.container .onlinecourse .type li:hover a{
    color: #FD5843;
} 
.container .onlinecourse .more{
    margin-top: 8px;
}
.container .onlinecourse .onlinecontent{
    width: 100%;
    height: 560px;
    position: absolute;
    left: 0;
    top: 25px; 
    /* border: 1px solid #333; */
    display: none;
}
.container .onlinecourse .active{
    display: block;
}
.container .onlinecourse .onlinecontent li{
    width: 285px;
    height: 260px;
    background-color: #ffffff;
    margin: 20px 15px 0 0;
    float: left;
}
.container .onlinecourse .onlinecontent li:hover{
    transform: translateY(-3px);
}
.container .onlinecourse .onlinecontent li a > img{
    width: 285px;
    height: 161px;
}
.container .onlinecourse .onlinecontent li .desc{
    display: block;
    margin: 15px 0 0 5px;
    text-indent: 3px;
    font:14px/1 "微软雅黑";
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.container .onlinecourse .onlinecontent li .desc:hover{
    text-decoration: underline;
}
.container .onlinecourse .onlinecontent li .detail{
    margin: 23px  0 0 8px;
}
.container .onlinecourse .onlinecontent li .detail .price{
    font: 20px/1 "微软雅黑";
    color: #FF4D00;
}
.container .onlinecourse .onlinecontent li .detail .price > b{
    font-size: 15px;
}
.container .onlinecourse .onlinecontent li .detail .length{
    width: 55px;
    height: 25px;
    text-align: center;
    display: inline-block;
    background-color: #FFEFE8;
    font:12px/25px "微软雅黑";
    color: #FB8C23;
    margin-right: 12px;
}

Javascript

难点在于Javasctipt部分, 首先通过Ajax获取json数据，给滑入的li添加对应的自定义属性attr, 获取返回的数据中对应attr的数组，同时获取此时li的索引下标, 给对应的ul渲染数据，最后进行选项卡的显示隐藏和样式操作

// 4.Readlization of online courses
    // 4.1 Ajax request data
    ajax('get','../data/lessonContent_new.json','',function(res){
        // console.log(res);
        var transRes = JSON.parse(res);
        var goodLesson = transRes.goodLesson;
        Tab(goodLesson,'onlinetype','onlinecontent');
    });

    function Tab(lesson, typeId, contentClass){
        
        console.log(lesson);
 
        // Get father element type
        var type = document.getElementById(typeId);
        // console.log(type);
        var typeLis = type.getElementsByTagName('li');
        //console.log(typeLis);
        var content = document.getElementsByClassName(contentClass);
        // console.log(content);
        // When mouse enter into each type, show corresponding content
        for(var i = 0; i < typeLis.length; i++){
            typeLis[i].index = i;
            typeLis[i].onmouseenter = function(){
                // set and border
                // Exclusive
                for(var j = 0; j < typeLis.length;j++){
                     typeLis[j].style.borderBottom = 'none';
                }
                this.style.borderBottom = '1px solid #FD5843';
                // get attribute
                var attr = this.getAttribute('attr');
                // console.log(attr);

                // console.log(lesson[attr]);
                // console.log(typeof lesson[attr][0].price);
                // record length
                var length = lesson[attr].length;
                //Rendering the page to corresponding content
                // console.log(this.index);
                content[this.index].innerHTML = '';
                for(var i = 0; i < length; i++){
                    content[this.index].innerHTML += '<li>\
                    <a href="#">\
                        <img src="'+ lesson[attr][i].img +'" alt="">\
                    </a>\
                    <a href="#" class = "desc">\
                       '+ lesson[attr][i].title +'\
                    </a>\
                    <p class = "detail clearfix">\
                       <span class = "price"><b>￥</b>'+ parseFloat(lesson[attr][i].price) +'</span>\
                       <span class = "length fr">'+ lesson[attr][i].time +'</span>\
                    </p>\
                </li>';
                }
                // exclusive
                for(var k = 0; k < content.length; k++){
                    content[k].className = contentClass;
                }
                content[this.index].className = contentClass + ' active'; 
            }
        }
    }

封装后的函数

// 4.Readlization of online courses
// 4.1 Ajax request data
    ajax('get','./data/lessonContent_new.json','',function(res){
        // console.log(res);
        var transRes = JSON.parse(res);
        // goodLesson
        var goodLesson = transRes.goodLesson;
        Tab(goodLesson,'onlinecourse','onlinetype','onlinecontent');

        // freeLesson
        var freeLesson = transRes.freeLesson;
        Tab(freeLesson, 'freecourse','freetype', 'freecontent');

        var jobLesson = transRes.jobLesson;
        Tab(jobLesson, 'jobcourse', 'jobtype', 'jobcontent')
    });

    function Tab(lesson, courseId, typeId, contentClass){
        
        // console.log(lesson);
        var course = document.getElementById(courseId);
        var title = course.querySelector('h3');
        // console.log(title);
        // Get father element type
        var type = document.getElementById(typeId);
        // console.log(type);
        var typeLis = type.getElementsByTagName('li');
        var typeCon = type.getElementsByTagName('a');
        // console.log(typeLis);
        var content = document.getElementsByClassName(contentClass);
        // console.log(content);
        // When mouse enter into h3, display default value
        title.onmouseenter = function(){
        content[content.length - 1].className = contentClass + ' active';
        }
        // When mouse enter into each type, show corresponding content
        for(var i = 0; i < typeLis.length; i++){
            typeLis[i].index = i;
            typeLis[i].onmouseenter = function(){
                // set and border
                // Exclusive
                for(var j = 0; j < typeLis.length;j++){
                     typeLis[j].style.borderBottom = 'none';
                     typeCon[j].style.color = '#333333';
                }
                this.style.borderBottom = '1px solid #FD5843';
                typeCon[this.index].style.color = '#FD5843';
                // get attribute
                var attr = this.getAttribute('attr');
                // console.log(attr);

                // console.log(lesson[attr]);
                // console.log(typeof lesson[attr][0].price);
                // record length
                var length = lesson[attr].length;
                //Rendering the page to corresponding content
                // console.log(this.index);
                content[this.index].innerHTML = '';
                // append content
               /*  for(var i = 0; i < length; i++){
                    content[this.index].innerHTML += '<li>\
                    <a href="#">\
                        <img src="'+ lesson[attr][i].img +'" alt="">\
                    </a>\
                    <a href="#" class = "desc">\
                       '+ lesson[attr][i].title +'\
                    </a>\
                    <p class = "detail clearfix">\
                       <span class = "price"><b>￥</b>'+ parseFloat(lesson[attr][i].price) +'</span>\
                       <span class = "length fr">'+ lesson[attr][i].time +'</span>\
                    </p>\
                </li>';
                } */
                for(var i = 0; i < length; i++){
                    content[this.index].innerHTML += `<li>
                    <a href="#">
                        <img src=" ${lesson[attr][i].img} " alt="">
                    </a>
                    <a href="#" class = "desc">
                        ${lesson[attr][i].title} 
                    </a>
                    <p class = "detail clearfix">
                       <span class = "price"><b>￥</b> ${parseFloat(lesson[attr][i].price)} </span>
                       <span class = "length fr"> ${lesson[attr][i].time} </span>
                    </p>
                </li>`;
                }
                // exclusive
                for(var k = 0; k < content.length; k++){
                    content[k].className = contentClass;
                }
                content[this.index].className = contentClass + ' active'; 
            }
        }
    }

本文地址：https://blog.csdn.net/qq_37086980/article/details/111143989