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

描述: 点击对应文字描述, 切换到对应的图片(AJAX信息交互方式)

代码实现

HTML

			<!-- hot live -->
            <div class="hotlive clearfix">
                <!-- title -->
                <h3 class="fl">热门直播</h3>
                <div class="more fr">
                 	<a href="#" class = "fl">更多</a>
                    <i class = "iconfont icon-jiahao1 fl"></i>
                </div>
                <div style="clear: both;"></div>
                <!-- content -->
                <div class="hotcontent clearfix" id = "hotcontent">
                    <!-- hot image -->
                    <div class = "active hotimg"></div>
                    <div class = "hotimg"></div>
                    <div class = "hotimg"></div>
                    <div class = "hotimg"></div>
                    <div class = "hotimg"></div> 
                    <p class = "active sequence"></p>
                    <p class = "sequence"></p>
                    <p class = "sequence"></p>
                    <p class = "sequence"></p>
                    <p class = "sequence"></p>
                    <div class="notstart">
                        <i class="iconfont icon-icon-"></i>
                        未开始
                    </div>
                    <!-- hot description -->
                    <ul class="hotdesc fr" id = "hotdesc">
                        <li>
                            <div class="time"></div>
                            <h3></h3>
                        </li>
                        <li>
                            <div class="time"></div>
                            <h3></h3>
                        </li>
                        <li>
                            <div class="time"></div>
                            <h3></h3>
                        </li>
                        <li>
                            <div class="time"></div>
                            <h3></h3>
                        </li>
                        <li>
                            <div class="time"></div>
                            <h3></h3>
                        </li>
                    </ul>
                </div>
            </div>

CSS

.container .hotlive{
    margin-top: 50px;
    width: 100%;
    height: 400px;
}
.container .hotlive > h3{
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 25px;
}
.container .hotlive .more{
    margin-top: 20px;
}
.container .hotlive .more > a{
    font: 15px/1 "微软雅黑";
    color:#A8A8A8;
}
.container .hotlive .more > a:hover{
    color: #FB4B00;
    text-decoration: underline;
}
.container .hotlive .more > i{
    font-size: 15px;
    font-weight: bold;
    color: #FB4B00;
    vertical-align: top;
}
.container .hotlive .hotcontent{
    position: relative;
}
.container .hotlive .hotcontent .hotimg{
    width: 620px;
    height: 349px;
    position: absolute;
    left: 0;
    top: 0;
    display: none; 
}

.container .hotlive .hotcontent .sequence{
    width: 600px;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    font: 15px/40px "微软雅黑";
    color: #C9C9C9;
    padding-left: 20px;
    display: none;
}
.container .hotlive .hotcontent .active{
    display: block;
}
.container .hotlive .hotcontent > .hotimg > img{
    width: 620px;
    height: 349px;
}
.container .hotlive .hotcontent .notstart{
    width: 130px;
    height: 50px;
    font: 18px/50px "微软雅黑";
    border-radius: 25px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    left: 245px;
    top: 50%;
    transform:translateY(-50%);
    z-index: 20;
    background-color: rgba(0,0,0,0.9);
}
.container .hotlive .hotcontent .notstart > i{
    font-size: 20px;
    vertical-align: top;
}
.container .hotlive .hotcontent .hotdesc{
    width: 580px;
    height: 339px;
    padding: 5px 0;
    background: url(../img/ujyx_24.jpg) #ffffff repeat-y 43px top; 

}
.container .hotlive .hotcontent .hotdesc li{
    width: 580px;
    height: 66px;
    cursor: pointer;
}
/* .container .hotlive .hotcontent .hotdesc li:hover{
    background-color: #FFF7F3;
} */
.container .hotlive .hotcontent .hotdesc li .time{
    width: 112px;
    height: 66px;
    float: left;
    background: url(../img/ujyx_25.jpg) no-repeat left 27px;
    margin-left: 35px;
    font: 12px/20px "微软雅黑";
    color: #8896B5;
}
.container .hotlive .hotcontent .hotdesc li .time > span{
    display: inline-block;
    margin: 15px 0 0 30px;
}
.container .hotlive .hotcontent .hotdesc li h3{
    height: 66px;
    line-height: 66px;
    float: left;
}
.container .hotlive .hotcontent .hotdesc li h3 > a{
    font: 17px/1 "微软雅黑";
    color: #28334B;
}
.container .hotlive .hotcontent .hotdesc li h3 > a:hover{
    color:#FF4D00;
}

Javascript

	// 3.Realization of hot live list
    // 3.1 Ajax request data (img/desc/time)
    ajax('get','../data/hot.json','',function(res){
        // console.log(res);
        // Transform data
        var hotUrl = JSON.parse(res);
        console.log(hotUrl);

        // Rendering the page, comment previous static data in html page
        // Get father element
        var hotContent = document.getElementById('hotcontent');
        // console.log(hotContent);
        var hotImage = hotContent.getElementsByClassName('hotimg');
        var sequence = hotContent.getElementsByClassName('sequence');
        // console.log(hotImage, sequence);
        // Rendering image and sequence
        for(var i = 0; i < hotUrl.length; i++){
            hotImage[i].innerHTML = '<img src=' + hotUrl[i].src + ' alt="hot"></img>';
            sequence[i].innerHTML = hotUrl[i].name;
        }

        // Rendering data to the right panel
        // Get father element hotdesc
        var hotDesc = document.getElementById('hotdesc');
        // console.log(hotDesc);
        // Get element time and h3
        var time = hotDesc.getElementsByClassName('time');
        var h3 = hotDesc.getElementsByTagName('h3');
        // console.log(time, h3);

        // Rendering time and desc into time and h3
        for(var i = 0; i < hotUrl.length; i++){
           time[i].innerHTML = '<span>'+ hotUrl[i].time +'</span>';
           h3[i].innerHTML = '<a href="#">' + hotUrl[i].name +'</a>';
        }

        /* 
            Tab function, click each li to get the content of corresponding payment, 
            and the background color of li is programmed in pink
        */
        //  Get element li from father element hotDesc
        var lis = hotDesc.getElementsByTagName('li');
        // console.log(lis);
        for(var i = 0; i < lis.length; i++){
            // custom index to save index
            lis[i].index = i;
            // event: when mouse enter into li
            lis[i].onmouseenter = function(){
                this.style.backgroundColor = '#FFF7F3';
                // console.log(this.index);
                // exclusive
                for(var j = 0; j < lis.length; j++){
                    hotImage[j].className = 'hotimg';
                    sequence[j].className = 'sequence';
                }
                // shift
                hotImage[this.index].className = 'active hotimg';
                sequence[this.index].className = 'active sequence';
            }
            // when mouse leave the li, background turn to white
            lis[i].onmouseleave = function(){
                this.style.backgroundColor = '#ffffff';
            }
        }
    });

hot.json

[
    {
        "src": "./img/hot-1.jpg",
        "name": "Web第一阶段直播答疑12.14",
        "time": "2020-12-23 19:00:00"
    },
    {
        "src": "./img/hot-1.jpg",
        "name": "Web第二阶段直播答疑12.14",
        "time": "2020-12-24 19:00:00"
    },{
        "src": "./img/hot-2.jpg",
        "name": "JavaWeb开发答疑5",
        "time": "2020-12-25 19:00:00"
    },{
        "src": "./img/hot-3.jpg",
        "name": "UI第三阶段直播答疑(七)",
        "time": "2020-12-26 19:00:00"
    },{
        "src": "./img/hot-3.jpg",
        "name": "UI第三阶段直播答疑(八)",
        "time": "2020-12-27 19:00:00"
    }
]