Tab栏切换效果的制作

第1关：Tab栏CSS样式设计

 <!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训练

 <!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-ulvar 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;//当索引自增达到上限时，索引归0if (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-ulvar 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>

Tab栏切换效果的制作相关推荐

Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
仿网易云音乐app tab栏滑动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
DOM（二）：几个NB案例、属性操作（自定义属性）、tab栏切换（重难点）
这里写目录标题一.几个案例: 案例1:如何实现点击一个按钮亮,其余按钮全灭? 案例2:浏览器换肤效果案例3:表格隔行变色案例4:全选框和复选框(难的一塌糊涂) 我自己的逻辑: 老师操作小弟的逻辑 ...

Tab栏切换效果的制作

第1关：Tab栏CSS样式设计

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

Tab栏切换效果的制作相关推荐

最新文章

热门文章