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

最新推荐文章于 2022-06-20 07:00:00 发布
最新推荐文章于 2022-06-20 07:00:00 发布
阅读量111 收藏
点赞数
分类专栏： 代码实例 js交互设计 文章标签： javascript html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/111143989
版权

描述: 鼠标移入不同板块, 显示对应板块的内容, 不移入的时候为默认板块, 所有数据存储在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.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';
            }
        }
    }
夹心776655
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript之通用简单的table选项卡实现(二)
10-29
上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。
JavaScript插件Tab选项卡效果
11-27
闲来无事，研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。 本文介绍了此款插件的基本用法，实现的功能以及代码。 首先，来看看最终效果： 这是一款普通的Tab选项卡插件，下面来讲讲它...
【Javascript】进阶之选项卡在项目中的运用(一)
qq_37086980的博客
12-13 127
描述: 点击对应文字描述, 切换到对应的图片(AJAX信息交互方式) 代码实现 HTML <!-- hot live --> <div class="hotlive clearfix"> <!-- title --> <h3 class="fl">热门直播</h3> <div class="more fr">
JavaScript进阶(二)
qq_461491877的博客
01-30 1294
JavaScript进阶(二) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1Kt411w7MP?from=search&seid=936655930091245798&spm_id_from=333.337.0.0 2020版尚硅谷Web前端ES6教程，涵盖ES6-ES11 68集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1uK411H7
javaScript进阶面向对象ES6
jxmchou的博客
09-12 435
JavaScript 面向对象 面向对象编程介绍 面向过程 面向对象 ES6 中的类和对象 类的继承 面向对象案例 构造函数和原型 构造函数和原型 继承 ES5 新增方法 函数进阶 正则表达式 ES6
【JavaScript 进阶教程】案例一：使用面向对象模拟浏览器顶部切换栏
weixin_52212950的博客
06-20 3264
我们已经学会了很多 Tab 栏的写法，原生 JS 的写法，jQuery 的写法等等，学了面向对象后，我们就要学会用面向对象来实现我们 ES6 的第一个小案例------面向对象 Tab 切换栏，其中和以往不同的是，增加了添加 tab 栏，双击修改 Tab 栏等功能，其实它更像我们浏览器网页的顶部选项卡。...............
JavaScript进阶篇
肖睿的博客
10-11 410
数组创建数组语法：var myarray=new Array();我们创建数组的同时，还可以为数组指定长度，长度可任意指定。var myarray= new Array(8); //创建数组，存储8个数据。 注意： 1.创建的新数组是空数组，没有值，如输出，则显示undefined。 2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素
JavaScript进阶篇(慕课网)
张中华的博客
03-02 442
<h5>第1章 系好安全带,准备启航 </h5> <b>1.1让你认识JS</b> 1.1.1 JavaScript能做什么？ 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等) 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等) 1.1.2 任务 我们先来回顾下JS入门篇的基础内容，在网页中...
JavaScript 进阶篇的学习~
weixin_30834019的博客
11-06 195
---恢复内容开始--- 让你认识JS 你知道吗，Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HTML+CSS创建一个漂亮的页面，但这还不够，它只是静态页面而已。我们还需使用JavaScript增加行为，为网页添加动态效果。准备好，让JavaScript带你进入新境界吧! JavaScript能做什么？ 1.增强...
学习笔记--JavaScript进阶篇
Little-3L的博客
03-26 762
一、 JS基础语法 1.1 什么是变量 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。 1.2 变量命名 变量名字可以任意取，只不过取名字要遵循一些规则: 1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下: 正确: mysum _mychar ...
JavaScript进阶教程(第二课)第1/3页
10-30
JavaScript进阶教程(第二课)
JavaScript实现Tab选项卡切换
12-28
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下 会用到原生js的dom操作 html <body> <li class=seclect>1 <li>2 <li>3 <li>4 <li>5 <li>1 <l
基于javascript实现tab选项卡切换特效调试笔记
10-22
主要介绍了基于javascript实现tab选项卡切换特效调试笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+CSS实现数量增减图标和按钮
热门推荐
qq_37086980的博客
11-16 1万+
HTML部分： <div class="purchasenum mt25"> <span>购买数量</span> <i class="minus iconfont icon-subtract"></i> <input type="number" min="1" step="1" value="1"> <i class="plus iconfont icon-jiah..
HTML+CSS实现购物车表格
qq_37086980的博客
11-13 9004
HTML: <main> <div class="container"> <table border="0" cellspacing = "0" id = "shoppingcartinfo"> <thead> <tr> <th width = ..
【Vue.js + Element UI】实现左侧导航栏制作
qq_37086980的博客
01-28 5531
【Vue.js + Element UI】实现右侧导航栏制作 利用Element UI进行页面搭建 /components/Menu.vue <template> <div class="aside"> <!-- 导航菜单组件 el-menu: 容器组件 @open 监听下拉打开 @close 监听下拉菜单打开 default-active string 默认选中的菜单项的index的值 text-col
【Javascript】入门之实现轮播图效果(无缝轮播/箭头切换/圆点切换)
qq_37086980的博客
12-08 3368
描述: 1. 布局, 有几张图就有几个小圆点 2. 在页面中，每隔5s图片切换到下一章 3. 点击左箭头, 让图片依次切换 4–3--2–1--4 4. 点击右箭头, 让图片依次切换 1–2--3–4--1 5. 点击小圆点，图片切换到对应的 6. 鼠标划上div，清除定时器 7. 划下div, 定时器重新开启 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
【Vue.js】实现商品添加、列表展示和删除商品
qq_37086980的博客
01-20 2875
【Vue.js】实现商品添加、列表展示和删除商品 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Management</title>
javascript进阶
最新发布
10-09
引提供了一些关于JavaScript的进阶内容，包括获取元素的不同方式和JS的引入方式。其中，通过类名、标签名、name属性名、id名以及...2. 如何在JavaScript中实现数据的持久化存储？ 3. JavaScript中的继承有哪几种方式？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值