JavaScript-----tab栏的切换

简单实现一下tab栏的切换：

<!DOCTYPE html>
<html lang="en"><meta charset="UTF-8"><title>tab栏切换的实现</title><head><style>.box{width: 600px;height: 300px;margin: auto;}.tab_lis{height: 39px;background-color: #aaa;}.tab_lis ul li{float: left;height: 39px;line-height: 39px;display: inline;padding: 0 20px;text-align: center;cursor: pointer;}.tab_con{margin-top: 20px;height: 200px;}.current{color: #fff;background-color: red;}.item{display: none;}</style></head><body><div class="box"><div class="tab_lis"><ul><li class="current">商品详情</li><li>商品评价</li><li>其他信息</li><li>类似商品</li></ul></div><div class="tab_con">  <div class="item" style="display:block ;">商品详情页面</div><div class="item">商品评价页面</div><div class="item">其他信息页面</div><div class="item">类似商品页面</div></div></div><script>//1.上面的tab_lis点击的//获取元素var tab_lis = document.querySelector('.tab_lis');var lis =tab_lis.querySelectorAll('li');var items = document.querySelectorAll('.item');     //tab_lis 循环遍历所有lisfor(var i=0;i<lis.length;i++){//开始给4个小li设置索引号----items通过索引号来显示哪个lis[i].setAttribute('date-index',i);lis[i].onclick = function(){//清除其他的className，保留自己的ClassName；for(var i = 0; i<lis.length;i++){lis[i].className='';}this.className='current';//2.tab_con中上面点击哪个就显示对应的tab_convar index = this.getAttribute('date-index');//隐藏其他的页面的内容for(var i=0; i<items.length; i++){items[i].style.display = 'none';}items[index].style.display = 'block';}}</script></body>
</html>

实现的效果：

JavaScript-----tab栏的切换相关推荐

JavaScript基础 - 经典案例3 - tab栏选项卡切换
通常我们用 js 写 tab 栏切换功能会用到排他思想,即干掉其他人,留下我自己但也可以用一个更有效率的方法:找出那个特殊的人,精准干掉他,放过其他无辜的人,然后留下我自己实现过程:假设需要切换 ...
tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name= ...
js实现tab栏的切换
目录实现点击变色效果: 点击之后下面的内容跟着变化全部代码: 最后: 界面效果图如上,点击第二栏后第二栏变为红色,下面显示第二栏的内容. html代码:如下 <header class=&q ...
纯CSS实现Tab栏的切换
思路利用input标签的radio类型中的checked属性控制当前选中tab 隐藏radio的显示,用label标签的for属性关联radio,对label进行样式编写实现tab栏的自定义. 一个 ...
JavaScript简单的Tab栏导航——切换页面
这是昨天的一个课堂练习,简单展示一下!做的是一个简单的页面交互效果,呈现一种内嵌效果.效果图如下: 首先直接看一下它的js代码吧,在不一样的皮囊里藏着千篇一律的灵魂,主要是要体会从中的for循坏绑定点 ...
Element-ui tab栏的切换
代码: <template><div class=""><h3>{{ id }}</h3><div class="d ...
tab栏的切换【DOM点击事件】
不太美观,但是想把这段js代码放上来,自己翻着玩. <style type="text/css"> .Box { width: 240px; border: 1px s ...
AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
H5+CSS+JS Tab导航栏自动切换
传智播客教材案例功能删改 html5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" ...
磨砂玻璃效果的Tab栏
效果图先上这是我在b站跟写模仿的,据我观察这教材应该是从外网扒的,所以我就不贴链接了. 代码放在这里. html: <!DOCTYPE html> <html lang=" ...

JavaScript-----tab栏的切换

JavaScript-----tab栏的切换相关推荐

最新文章

热门文章