Tab栏切换效果的制作

最新推荐文章于 2024-03-28 22:48:12 发布
最新推荐文章于 2024-03-28 22:48:12 发布
阅读量920 收藏
点赞数
分类专栏： # Web程序设计基础 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60416689/article/details/122386234
版权

第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；

编程要求

根据提示，在右侧编辑器补充代码 要求上边界为实线 颜色样式为#206F96 上边界宽度2px 要求鼠标选中的图片颜色为#fff（默认的第一卡栏 表头颜色）
 

 <!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;
    /* ********* Begin ********* */
	border-top:2px solid #206F96;
    /* ********* End ********* */
    }
/*选项样式*/
.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{
    /* ********* Begin ********* */
	background:#fff;
    /* ********* End ********* */
    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() 方法的参数。

编程要求

根据提示，在右侧编辑器补充代码

获取所有的tab-head-div标签 在指定位置开启启动器 在指定的位置关闭启动器 了解函数功能

 

 <!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
    /* ********* Begin ********* */
    var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
    /* ********* End ********* */
	
	//保存当前焦点元素的索引
	var current_index=0;
	//启动定时器 要求每5秒执行函数'autoChange'一次
     /* ********* Begin ********* */
	var timer = window.setInterval(autoChange, 5000);
     /* ********* End ********* */
	//遍历元素
	for(var i=0;i<head_divs.length;i++){
		//添加鼠标滑过事件
		head_divs[i].onmouseover = function(){
			//鼠标滑过时清除timer启动器
            /* ********* Begin ********* */
			clearInterval(timer);
            /* ********* End ********* */
			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>

NGC 2237号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最简单的tab切换实例代码
09-02
下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3超酷tab选项卡式页面切换特效
12-13
这是一款使用纯css3制作的类似tab选项卡的全屏页面切换特效插件。该tab选项卡的选项以侧边栏的形式排列，点击每个选项就会以动画的显示进行全屏页面切换。
educoder头歌Web实训 web课——综合应用案例：Tab栏切换效果的制作
weixin_51538341的博客
01-08 2640
educoder头歌Web实训 太原理工web课——综合应用案例：动态焦点图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客 第1关：Tab栏CSS样式设计 任务描述 本关任务：设计div容器，实现tab栏css样式设计。 相关知识 为了完成本关任务，你需要掌握：css样式设计 css样式设计 这里举例与我们任务有关的边界样式设计 margin： 上边界值 右边界值 下边界值 左边界值 这个和移动端稍微有点区别，移动端是：上左下右的设置 请注意：下面写法的含义 margin:5px;
前端项目实践案例——制作Tab选项卡点击切换效果
shhghvvh的博客
11-23 3200
制作Tab选项卡点击切换效果
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2070
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
几种项目中常用的tab选项卡切换
qq_43766059的博客
08-10 2626
页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。
tab图标栏动画切换特效
06-01
html5 css3制作实用的标签栏tab动画切换，带背景色和图标栏tab切换特效。
HTML5 Tab图标栏动画切换特效
07-24
HTML5 Tab图标栏动画切换特效是一款基于HTML5+CSS3制作的带背景色和图标栏tab切换特效。
微信小程序 swiper制作tab切换实现附
12-29
微信小程序 swiper制作tab切换 实现效果图： swiper制作tab切换 index.html <view class=swiper-tab> <view class=swiper-tab-list xss=removed data-current=0 bindtap=swichNav>Seside1 <view class=swiper-...
js实现tab标签切换效果.zip
07-04
js实现tab标签切换效果是一款无需jQuery，原生javascript制作的tab切换效果。
使用 HTML/CSS 实现 Educoder 顶部导航栏
Junds0的博客
11-09 1510
第1关：使用flex布局实现Educoder顶部导航栏容器布局 1.页面最小宽度：1200px 2.导航栏背景颜色16进制：#24292D 3.导航栏高度：60px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Educoder</title> <script src="https://cdn.staticfile.org/j
vue实现多个tab标签页的切换与关闭
aaa123aaasqw的博客
05-11 3841
当关闭tab标签的时候，splice删除当前标签，若是删除的最后一项，跳转到该项的前一项页面。当长度为1时，跳转到首页。通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用。中，避免页面刷新丢失，当浏览器关闭时，清空数据。将vuex中的数据保存到。
【Web应用技术基础】CSS(6)——使用 HTML/CSS 实现 Educoder 顶部导航栏
最新发布
m0_74164458的博客
03-28 940
【代码】【Web应用技术基础】CSS(6)——使用 HTML/CSS 实现 Educoder 顶部导航栏。
第一天：tab切换栏案例
zxdznyy的博客
09-20 963
用惯了框架会发现，原生的动画和样式能够熟练写出来才是无敌。所以，第一天打卡从案例开始。也是我最近在项目中遇到的原生写法：tab栏的切换。所用js细节：排他思想，设置自定义索引。设置自定义属性一般用于设置索引。分为三个部分：设置，获取，删除。先看以下代码
封装一个简单的tab切换效果
文龙刚的博客
12-15 307
封装一个简单的tab切换效果
Tab切换效果（Html+css+js）
qq_62714412的博客
10-18 2500
本文主要是分享自己做过的一个tab练习，涉及到html+css+js内容，内容较容易，有利于初学者熟悉理解html+css+js的操作及解决问题的思路
《Web应用开发》(头歌)
热门推荐
m0_58186089的博客
03-01 1万+
这里写目录标题实验一HTML——表单类的标签第1关 表单元素——文本框第2关 表单元素——密码框第3关 表单元素——单选框第4关 表单元素——多选框第5关 表单元素——checked属性第6关 表单元素——disabled 属性第7关 表单元素——label 标签第8关 表单元素——下拉列表第9关 表单元素——文本域第10关 表单元素——提交按钮第11关 表单元素的综合案例HTML入门——基础第1关 初识HTML：简单的Hello World网页制作第2关 HTML结构：自我简介网页HTML入门——文本第1
js实现tab栏切换效果
06-12
好的，以下是一个简单的JS实现tab栏切换效果的示例代码： HTML代码： ```html <div class="tab"> <button onclick="openTab('tab1')">Tab 1</button> <button onclick="openTab('tab2')">Tab 2</button> <button onclick="openTab('tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h2>Tab 1 Content</h2> <p>Some content for tab 1 goes here.</p> </div> <div id="tab2" class="tabcontent"> <h2>Tab 2 Content</h2> <p>Some content for tab 2 goes here.</p> </div> <div id="tab3" class="tabcontent"> <h2>Tab 3 Content</h2> <p>Some content for tab 3 goes here.</p> </div> ``` CSS代码： ```css .tabcontent { display: none; } .tabcontent.active { display: block; } ``` JS代码： ```javascript function openTab(tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("active"); } document.getElementById(tabName).classList.add("active"); } ``` 这段代码中，我们在HTML中定义了一个tab栏，包含了多个按钮和对应的内容区域。CSS中定义了初始状态下内容区域是隐藏的，JS中定义了一个函数`openTab`，当点击按钮时调用该函数，将当前选中的内容区域显示出来，同时隐藏其他内容区域。其中，我们使用`classList`来动态添加和删除`active`类，来实现内容区域的显示和隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值