tab栏切换html

1.实现效果：当鼠标点击上面的选项卡，下面的内容随之变化

2.代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.tab {margin: 100px;}.tab_list ul {display: inline-block;width: 558px;height: 40px;border: 1px solid #ccc;background-color: rgb(233, 233, 233);text-align: center;line-height: 40px;}.tab_list ul li {float: left;display: block;list-style: none;padding-left: 10px;padding-right: 10px;}.current {background-color: red;color: #fff;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价(5000)</li><li>手机社区</li></ul><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（5000）模块内容</div><div class="item">手机社区模块内容</div></div></div></div><script>// 1.模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循环绑定事件for (var i = 0; i < lis.length; i++) {// 开始给五个li设置索引号lis[i].setAttribute('index', i);lis[i].onclick = function () {// 干掉所有人 其余的li清除class这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己this.className = 'current';// 2.下面的显示内容模块var index = this.getAttribute('index');console.log(index);// 干掉所有人，让其余的item这些div隐藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}items[index].style.display = 'block';}}</script>
</body></html>

3.遇到的问题：

（1）ul左边有默认的边距

原因：浏览器的ul有默认的padding-inline-start: 40px;

解决方案：在css的样式中添加以下代码即可

* {

margin: 0;

padding: 0;

}

（2）底下的模块不能切换，一直显示第一个的内容

原因：在js里面items写错了，写成了item

4.内容参考来自b站的黑马前端的“JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续”视频

tab栏切换html相关推荐

微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
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栏切换html

tab栏切换html相关推荐

最新文章

热门文章