educoder头歌Web实训 web课——综合应用案例：Tab栏切换效果的制作

已于 2022-01-23 14:26:33 修改
阅读量2.6k 收藏 7
点赞数 8
分类专栏： web 文章标签： 前端 太原理工大学 css web educoder
于 2022-01-08 00:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51538341/article/details/122374917
版权

educoder头歌Web实训 太原理工web课——综合应用案例：动态焦点图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客

第1关：Tab栏CSS样式设计

任务描述

本关任务：设计div容器，实现tab栏css样式设计。

相关知识

为了完成本关任务，你需要掌握：css样式设计

css样式设计

这里举例与我们任务有关的边界样式设计 margin： 上边界值 右边界值 下边界值 左边界值 这个和移动端稍微有点区别，移动端是：上左下右的设置 请注意：下面写法的含义 margin:5px;表示四个值都是5px margin:5px 10px; 表示下边界值和上边界值都是5px,右边界值和左边界值都是10px; margin：5px 10px 15px;表示上=5，右=10，下=15，左=10；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab栏切换</title>、
<style>
   /* CSS Document */
/*全局控制*/
body{ font-size:14px; font-family:"宋体";}
/*清除浏览器默认样式*/
body,ul,li{list-style:none; margin:0; padding:0; }
/*大div样式*/
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
/*选项样式*/
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#eee;line-height:30px;text-align:center;cursor:pointer;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;}
.tab-head-r{border-right:0;}
/*选项内容样式*/
.tab-body-ul{display:none;margin:20px 10px;}
.tab-body-ul li{margin:5px;}
.tab-body .current{display:block;}
</style>
</head>
<body>
   <div class="tab-box">
       <div class="tab-head" id="tab-head">
           <div class="tab-head-div current">网页设计</div>
           <div class="tab-head-div">前端开发</div>
           <div class="tab-head-div">人工智能</div>
           <div class="tab-head-div tab-head-r">电商运营</div>
       </div>
       <div class="tab-body" id="tab-body">
           <ul class="tab-body-ul current">
               <li>HTML5+CSS3网页设计与制作</li>
               <li>互联网产品设计思维与实践</li>
               <li>Photoshop CS6图像设计案例教程</li>
               <li>跨平台UI设计宝典</li>
           </ul>
           <ul class="tab-body-ul">
               <li>JavaScript+jQuery交互式Web前端开发</li>
               <li>Vue.js前端开发实战</li>
               <li>微信小程序开发实战</li>
               <li>JavaScript前端开发案例教程</li>
           </ul>
           <ul class="tab-body-ul">
               <li>Python程序开发案例教程</li>
               <li>Python数据分析与应用：从数据获取到可视化</li>
               <li>Python实战编程:从零学Python</li>
               <li>Python快速编程入门</li>
           </ul>
           <ul class="tab-body-ul">
               <li>数据分析思维与可视化</li>
               <li>淘宝天猫店美工设计实操：配色、布局、修图、装修</li>
               <li>淘宝天猫店一本通： 开店、装修、运营、推广</li>
               <li>网络营销文案策划</li>
           </ul>
       </div>
   </div>
</body>
</html>

 第2关：Tab栏切换效果javascript训练

任务描述

本关任务：熟悉切换tab栏其中的函数，学会使用启动器 和鼠标鉴定事件。

相关知识

为了完成本关任务，你需要掌握 什么时启动器 如何使用启动器

启动器知识点

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab栏切换</title>、
<style>
    /* CSS Document */
/*全局控制*/
body{ font-size:14px; font-family:"宋体";}
/*清除浏览器默认样式*/
body,ul,li{list-style:none; margin:0; padding:0; }
/*大div样式*/
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
/*选项样式*/
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#eee;line-height:30px;text-align:center;cursor:pointer;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;}
.tab-head-r{border-right:0;}
/*选项内容样式*/
.tab-body-ul{display:none;margin:20px 10px;}
.tab-body-ul li{margin:5px;}
.tab-body .current{display:block;}
</style>
<script>
    //加载事件
window.onload = function(){
    //获取所有tab-head-div
    var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
    //保存当前焦点元素的索引
    var current_index=0;
    //启动定时器
    var timer = window.setInterval(autoChange, 5000);
    //遍历元素
    for(var i=0;i<head_divs.length;i++){
        //添加鼠标滑过事件
        head_divs[i].onmouseover = function(){
            clearInterval(timer);
            if(i != current_index){
                head_divs[current_index].style.backgroundColor = '';
                head_divs[current_index].style.borderBottom = '';
            }
            //获取所有tab-body-ul
            var body_uls = document.getElementById("tab-body").getElementsByTagName("ul");
            //遍历元素
            for(var i=0;i<body_uls.length;i++){
                //将所有元素设为隐藏
                body_uls[i].className = body_uls[i].className.replace(" current","");
                head_divs[i].className = head_divs[i].className.replace(" current","");
                //将当前索引对应的元素设为显示
                if(head_divs[i] == this){
                    this.className += " current";
                    body_uls[i].className += " current";
                }
            }
        }
        //的鼠标移出事件
        head_divs[i].onmouseout = function(){
            //启动定时器，恢复自动切换
            timer = setInterval(autoChange,5000);
        }
    }
    //定时器周期函数-Tab栏自动切换
    function autoChange(){
        //自增索引
        ++current_index;
        //当索引自增达到上限时，索引归0
        if (current_index == head_divs.length) {
            current_index=0;
        }
        //当前的背景颜色和边框颜色
        for(var i=0;i<head_divs.length;i++){
            if(i == current_index){
                head_divs[i].style.backgroundColor = '#fff';
                head_divs[i].style.borderBottom = '1px solid #fff';
            }else{
                head_divs[i].style.backgroundColor = '';
                head_divs[i].style.borderBottom = '';
            }
        }
        //获取所有tab-body-ul
        var body_uls = document.getElementById("tab-body").getElementsByTagName("ul");
        //遍历元素
        for(var i=0;i<body_uls.length;i++){
            //将所有元素设为隐藏
            body_uls[i].className = body_uls[i].className.replace(" current","");
            head_divs[i].className = head_divs[i].className.replace(" current","");
            //将当前索引对应的元素设为显示
            if(head_divs[i] == head_divs[current_index]){
                this.className += " current";
                body_uls[i].className += " current";
            }
        }
    }
}
</script>
</head>
<body>
    <div class="tab-box">
        <div class="tab-head" id="tab-head">
            <div class="tab-head-div current">网页设计</div>
            <div class="tab-head-div">前端开发</div>
            <div class="tab-head-div">人工智能</div>
            <div class="tab-head-div tab-head-r">电商运营</div>
        </div>
        <div class="tab-body" id="tab-body">
            <ul class="tab-body-ul current">
                <li>HTML5+CSS3网页设计与制作</li>
                <li>互联网产品设计思维与实践</li>
                <li>Photoshop CS6图像设计案例教程</li>
                <li>跨平台UI设计宝典</li>
            </ul>
            <ul class="tab-body-ul">
                <li>JavaScript+jQuery交互式Web前端开发</li>
                <li>Vue.js前端开发实战</li>
                <li>微信小程序开发实战</li>
                <li>JavaScript前端开发案例教程</li>
            </ul>
            <ul class="tab-body-ul">
                <li>Python程序开发案例教程</li>
                <li>Python数据分析与应用：从数据获取到可视化</li>
                <li>Python实战编程:从零学Python</li>
                <li>Python快速编程入门</li>
            </ul>
            <ul class="tab-body-ul">
                <li>数据分析思维与可视化</li>
                <li>淘宝天猫店美工设计实操：配色、布局、修图、装修</li>
                <li>淘宝天猫店一本通： 开店、装修、运营、推广</li>
                <li>网络营销文案策划</li>
            </ul>
        </div>
    </div>
</body>
</html>

玛卡巴卡
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html+css网页开发 之 头部导航条（logo、导航栏、搜索框）
qq_43623147的博客
12-10 4万+
页面布局整体思路： 确定页面的版心（可视区），测量可知。 分析页面中的行模块，以及每个行模块中的列模块。 一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。 制作HTML结构。遵循先有结构，后有样式的原则。 头部制作 1号是版心盒子header 1200*42的盒子水平居中对齐 版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav导航栏 版心盒子内包含4号盒子search搜索框 版心盒子内包含5号盒子user个人信息 注意4个盒子都必须是浮动 style.c..
jQuery插件实现非常实用的tab栏切换功能【案例】
10-17
主要介绍了jQuery插件实现非常实用的tab栏切换功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JavaScript实现tab栏切换效果
10-15
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
头歌Web实训答案（2023TYUT）
qq_74637823的博客
12-20 3046
头歌web实训作业答案
【Web应用技术基础】CSS(6)——使用 HTML/CSS 实现 Educoder 顶部导航栏
最新发布
m0_74164458的博客
03-28 956
【代码】【Web应用技术基础】CSS(6)——使用 HTML/CSS 实现 Educoder 顶部导航栏。
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2079
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
vue实现多个tab标签页的切换与关闭
aaa123aaasqw的博客
05-11 3858
当关闭tab标签的时候，splice删除当前标签，若是删除的最后一项，跳转到该项的前一项页面。当长度为1时，跳转到首页。通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用。中，避免页面刷新丢失，当浏览器关闭时，清空数据。将vuex中的数据保存到。
Educoder -- Web程序设计基础2021秋-- CSS3页面布局
hannah2233的博客
12-23 742
文章目录一、网页布局页面的制作第1关：网页布局的结构设计代码展示第2关：网页布局的样式设计代码展示移动端电商页面制作第1关：移动端电商页面制作代码展示 一、网页布局页面的制作 第1关：网页布局的结构设计 代码展示 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页布局</title> </head> <body> <!-- ****
html5纯 css tab切换效果,纯CSS3制作的Tab选项卡
weixin_29712031的博客
06-03 594
纯CSS3制作的Tab选项卡10月 14, 2013评论 (4)Sponsor在制作CSS TAB选项卡的时候一般都会用上JS，但CSS3的出现却可以实现无JS的方法，下面我们一起看看用纯CSS来制作一个选项卡的方法。使用纯CSS3来制作Tab的好处除了不需要使用jQuery外，还支持添加一些细微的CSS3交互，使Tab展示效果不错。PS:另外设计达人网还介绍过另一种纯CSS3 Tab的实现，请查...
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
js实现tab栏切换效果
10-15
在本文中，我们将探讨如何使用JavaScript（js）来实现一个简单的Tab栏切换效果。这个效果通常用于网页设计，以提供用户友好的界面，让用户能够轻松地在不同的内容区域之间切换。以下是如何实现这个功能的详细步骤： ...
非常漂亮的TAB效果
09-30
非常漂亮的TAB效果 one two three
Vue tab栏切换案例
07-17
vue tab栏切换
头歌--Web应用开发实验题
qq_62362934的博客
04-10 6295
《Web应用开发》头歌平台，相互交流
css3实现tab切换效果
爱折腾的程序员
05-19 3936
程序员用代码交流： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3 tab切换</title> <!--角标--> <link rel="shortcut icon" href="https:...
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
weixin_46001736的博客
08-25 6928
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
tab栏的切换【html+css+js】
m0_69892739的博客
01-06 981
【代码】tab栏的切换【html+css+js】
头歌——CSS从入门到精通——定位与布局
Changersh
12-15 1528
CSS从入门到精通——定位与布局
用webapi实现tab栏切换
03-29
1. HTML结构 ```html <div class="tab-container"> <div class="tab-nav"> <a href="#" data-tab="tab1" class="active">Tab 1</a> <a href="#" data-tab="tab2">Tab 2</a> <a href="#" data-tab="tab3">Tab 3</a> </div> <div class="tab-content"> <div id="tab1" class="tab-panel active">Tab 1 Content</div> <div id="tab2" class="tab-panel">Tab 2 Content</div> <div id="tab3" class="tab-panel">Tab 3 Content</div> </div> </div> ``` 2. CSS样式 ```css .tab-container { display: flex; flex-direction: column; margin: 20px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .tab-nav { display: flex; } .tab-nav a { padding: 10px; text-decoration: none; color: #333; background-color: #f7f7f7; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; cursor: pointer; } .tab-nav a.active { background-color: #fff; border-bottom: 1px solid #fff; } .tab-content { padding: 10px; } .tab-panel { display: none; } .tab-panel.active { display: block; } ``` 3. JavaScript代码 ```javascript const tabs = document.querySelectorAll('.tab-nav a'); const panels = document.querySelectorAll('.tab-panel'); tabs.forEach(tab => { tab.addEventListener('click', e => { e.preventDefault(); const tabId = tab.getAttribute('data-tab'); tabs.forEach(tab => tab.classList.remove('active')); panels.forEach(panel => panel.classList.remove('active')); tab.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); ``` 4. 解释 - 首先，我们使用`querySelectorAll`方法获取所有的tab标签和panel标签。 - 然后，我们遍历每个tab标签，并为其添加一个`click`事件监听器。 - 当某个tab被点击时，我们获取其`data-tab`属性值，以便找到对应的panel标签。 - 然后，我们将所有的tab标签和panel标签的`active`类都移除。 - 最后，我们给当前被点击的tab标签和对应的panel标签添加`active`类，以便显示它们。 这样，我们就完成了一个简单的tab栏切换功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玛卡巴卡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值