HTML 导航栏标签切换

html code

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.tab-box {border: 2px solid greenyellow;}/* display: flex弹性盒子，水平方向*/.tab-head {display: flex;}/* flex-grow生长为100%*/.tab-head-div {flex-grow: 1;text-align: center;background: green;border-right: 1px solid white;line-height: 40px;}.tab-head-div.current {background: wheat;}.tab-body-div {display: none;}.tab-body-div.current {display: block;}</style></head><body><div class="tab-box"><div class="tab-head"><div class="tab-head-div current" onclick="selectTab(0)">标签一</div><div class="tab-head-div" onclick="selectTab(1)">标签二</div><div class="tab-head-div" onclick="selectTab(2)">标签三</div><div class="tab-head-div" onclick="selectTab(3)">标签四</div></div><div class="tab-body"><div class="tab-body-div current">1</div><div class="tab-body-div">2</div><div class="tab-body-div">3</div><div class="tab-body-div">4</div></div></div><script type="text/javascript" src="js/tab.js" ></script></body>
</html>

js code

/** 1.把tab-body-div和tab-head-div选中状态移除* 2.把制定下表的index和tab-head-div和tab-body-div的选中状态加上去*/
var tabs = document.getElementsByClassName('tab-head-div'); //标签头集合
var tab_bodys = document.getElementsByClassName('tab-body-div'); //标签内容集合function selectTab(index) {for (var i = 0; i < tabs.length; i++) {tabs[i].classList.remove('current');tab_bodys[i].classList.remove('current');}tabs[index].classList.add('current');tab_bodys[index].classList.add('current');
}

HTML 导航栏标签切换相关推荐

HTML5+CSS3小实例：富有弹性的导航栏标签
HTML5+CSS3实现富有弹性的导航栏标签,切换如此Q弹的标签栏,你确定不手敲一遍?没有用到JavaScript哦! 效果: 源码: <!DOCTYPE html> <html&g ...
java写左侧导航栏界面,jQuery----左侧导航栏面板切换实现
页面运行结果: 点击曹操点击刘备点击孙权原图需求说明:原图如上所示,点击一方诸侯的时候,显示该诸侯手下猛将,其他诸侯手下猛将隐藏页面结构: 实现思路: ①给大的li注册鼠标点击事件当鼠标点 ...
php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
Android 底部导航栏+页面切换
lzyprime 博客 (github) 更新时间: 2020.12.21 创建时间:2020.11.25 qq及邮箱:2383518170 kotlin & android 笔记更新 20 ...
html如何设置中英导航,js怎么在导航栏互相切换中英文
这次给大家带来js怎么在导航栏互相切换中英文,js在导航栏互相切换中英文的注意事项有哪些,下面就是实战案例,一起来看一下. ul的高度为li的一半,ul{overflow:hidden} li:hov ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
mui实现底部导航栏页面切换
1 问题描述 mui是一款最接近原生的框架,对于会使用的人来说十分的便捷易操作,但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路. 对于那些不懂的前端的人,或者是一些刚入门html的人,他们 ...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
织梦网站导航栏html代码,织梦导航栏标签Channel增加自动序号的方法
我们在用织梦建站做栏目导航时,需要用到下面的样式: 这样的序列在标签{dede:channel}中是无法调用的,所以必须修改标签, 默认的{dede:channel}调用方法: {dede:chann ...

HTML 导航栏标签切换

html code

js code

HTML 导航栏标签切换相关推荐

最新文章

热门文章