tab栏切换制作(原生js版本）

效果展示：

代码展示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0px;padding: 0px;}#container {/* background-color: red; */width: 800px;margin: 100px auto;}#header {/* background-color: pink; */}ul {list-style: none;display: flex;flex-flow: row nowrap;height: 50px;line-height: 50px;}li {flex-grow: 1;border: 1px solid skyblue;background-color: lightgray;/* text-align: center; *//* background-color: skyblue; */}.item {display: none;}.current {background-color: pink;}.show {display: block;}</style></head><body><div id="container"><div id="header"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul></div><div id="footer"><div class="show">商品介绍</div><div class="item">规格预包装</div><div class="item">售后保障</div><div class="item">商品评价</div><div class="item">手机社区</div></div></div><script>//获取元素对象集合var lis = document.querySelector("#header").querySelectorAll('li');//循环给每个li元素添加点击事件for (var i = 0; i < lis.length; i++) {lis[i].setAttribute("index", i); //给每个li添加一个自定义属性index作为标记lis[i].onclick = function() {//进行排他思想先清除所有的背景颜色for (var i = 0; i < lis.length; i++) {lis[i].className = '';}//只留下当前操作的元素改变背景颜色this.className = 'current';//显示内容模块//获取内容模块元素对象集合var divs = document.querySelector('#footer').querySelectorAll('div');//排他思想循环将所有的div隐藏for (var i = 0; i < divs.length; i++) {divs[i].className = 'item';}var indexs = this.getAttribute("index"); //点击那个li就获取那个li的index属性值divs[indexs].className='show';}}</script></body>
</html>

tab栏切换制作(原生js版本）相关推荐

qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...

tab栏切换制作(原生js版本）

tab栏切换制作(原生js版本）相关推荐

最新文章

热门文章