Tab栏切换系列——原生JS实现

最新推荐文章于 2023-12-06 16:56:24 发布
最新推荐文章于 2023-12-06 16:56:24 发布
阅读量369 收藏 1
点赞数
分类专栏： 前端相关手记 前端HTML效果 文章标签： Tab栏切换 原生JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ansheng02/article/details/86497044
版权

Tab栏切换将使用原生JS、jQuery、bootstrap、小程序分别实现，今天第一次，先来原生的实现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<style type="text/css">
	    *{
	    	padding: 0;
	    	margin: 0;
	    }
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.tab{
			background-color: #a1262642;
            border-radius: 20px;
            width: 800px;
            height: 192px;
            margin: 0 auto;
		}
		.tab-list,.tab-content li{
			text-align: center;
		}
		.tab-list{
			line-height: 40px;
			font-family: "微软雅黑";
			height: 40px;
		}
		.tab-list li{
			float: left;
            width: 129px;
            cursor: pointer;
		}
		.tab-content li{
			display: none;
			float: left;
            width: 100%;
            height: 150px;
            margin-top: 2%;
		}
		.tab-content li:first-child{
			display: block;
		}
		.tab-list li:first-child{
			color : #f00;
		    border-bottom: 3px solid #f00;
		}
		.tab-content li img{
			width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 3%;
		}
		.tab-content li a{
			display: block;
            float: left;
            position: relative;
            height: 120px;
            width: 130px;
            color: #333;
		}
		.tab-content li span{
			display: block;
		}
	</style>
</head>
<body>
	<div class="tab">
		<ul class="tab-list">
			<li>水果系列</li>
			<li>蔬菜系列</li>
			<li>畜牧水产</li>
			<li>粮油米面</li>
			<li>农副加工</li>
			<li>苗木花草</li>
		</ul>
		<ul class="tab-content">
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526491011&di=62a2c5d17ee25c1e377a6ce6f483eba8&imgtype=0&src=http%3A%2F%2Fpic7.photophoto.cn%2F20080618%2F0035035583858360_b.jpg" alt="图片"><span>水果系列</span></a>
			</li>
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526509704&di=63c9f4aebfa259ba20508292f57c92be&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F56%2F93%2F16pic_5693436_b.jpg" alt="图片"><span>蔬菜系列</span></a>
			</li>
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526555731&di=1865870f60ef3a8e750b6a1baf452fda&imgtype=0&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2FC4%2F44%2FwKgGTFaCQUiAcXG-AAMtYVDImfo332_600_600.jpg" alt="图片"><span>畜牧水产</span></a>
			</li>
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526572888&di=0d681cd36e73a64a06676373815fa03e&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150721%2F0008118486554899_b.jpg" alt="图片"><span>粮油米面</span></a>
			</li>
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526629723&di=506c431cd06d03d50911c60598b234dc&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F6832080301%2F1000" alt="图片"><span>农副加工</span></a>
			</li>
			<li>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
				<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547526652027&di=b5af8eab8e5333fdba0e17c9c4bd73e4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140424%2F0037037044842909_b.jpg" alt="图片"><span>苗木花草</span></a>
			</li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
	var  allItemList = document.querySelectorAll(".tab-list li");   //选择class="tab-list"下的所有li
    var  allContentList = document.querySelectorAll(".tab-content li");  //选择class="tab-content"下的所有li

    for (var i=0;i<allItemList.length;i++) {    //根据tab-list下的li标签长度循环
        allItemList[i].index=i;  //定义循环的每一个i的值                 
        allItemList[i].onmouseover=function() {
        for (var y=0;y<allContentList.length;y++) {
            allContentList[y].style.display="none";       //先将内容全部隐藏                  
        }
        allContentList[this.index].style.display="block";  //当鼠标触发时再显示对应的内容    
        for (var z=0;z<allItemList.length;z++) { 
            allItemList[z].style.color="#333";   //取消设置的字体颜色和底部边框
		    allItemList[z].style.borderBottom="none";               
        }
        allItemList[this.index].style.color="#f00";
		allItemList[this.index].style.borderBottom="3px solid #f00";
    };    
}
</script>

 

ansheng02
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现的tab标签切换效果代码分享
11-23
这是一款基于js实现的tab标签切换效果，是一款无需jQuery，原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能，非常具有实用价值。 运行效果图：——————-查看效果 下载源码——...
js实现tab内嵌图片滚动特效代码
03-20
"js实现tab内嵌图片滚动特效代码"是一个很好的例子，它展示了如何利用原生JavaScript实现一个功能丰富的用户界面元素——选项卡（tab）系统，同时在每个选项卡内嵌入图片并实现自动或手动的滚动效果。 首先，让我们...
原生js实现Tab切换
weixin_47619284的博客
08-17 1711
原生js实现Tab切换
使用JS来实现tab栏切换
weixin_64965154的博客
05-28 3609
我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。
原生js实现Tab切换+箭头滚动
最新发布
outsider76557的博客
12-06 645
原生JS实现tab切换+tab滚动，函数封装调用思想，手把手步骤演示。
原生JavaScript实现Tab栏切换案例
m0_46219714的博客
03-30 418
/ 获取被点击的Tab按钮的data-target属性值，即对应的Tab内容的data-tab属性值。// 遍历所有的Tab按钮，取消除了被点击的Tab按钮以外的所有按钮的active类名。// 遍历所有的Tab内容，隐藏除了被点击的Tab内容以外的所有内容。// 获取所有的Tab按钮和Tab内容。/* 设置当前Tab按钮的样式 *//* 设置Tab内容容器的样式 *//* 设置当前Tab内容的样式 *//* 设置Tab栏容器的样式 *//* 设置Tab按钮的样式 *//* 设置Tab内容的样式 */
tab栏的切换
zh_hunan的博客
10-19 2120
tab栏切换的思路 1、tab栏切换要有上下（左右）两个大的模块 2、上面的模块内有几个小模块 3、下面的模块要有几个模块与上面的模块一一对应、相匹配 4、点击上面的小模块，下面相应的模块显示，其余的隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
jquery多页签tab翻滚切换
06-10
在这个项目中，开发者巧妙地利用了jQuery来实现了一种新颖的页签切换方式——分块翻滚切换。 传统的tab标签切换通常是静态的，用户点击一个tab就显示相应的内容区域，而这个“分块翻滚切换”则为用户带来更动态的...
含有折叠列表功能界面侧滑功能以及多个listview的滑动界面点击tab实现界面切换
08-10
标题提到的是一个移动应用的界面设计，主要包含了三个关键功能：折叠列表功能，界面侧滑，以及通过点击tab实现界面切换。这些功能都是为了提供更好的用户体验，使得用户可以方便地浏览和操作内容。 1. 折叠列表功能...
简单的jquery tab选项卡切换代码样式
11-22
同时，考虑到现代浏览器对原生JavaScript的支持，也可以考虑使用Vanilla JS来实现，以减少对jQuery的依赖，提升性能。 通过学习和掌握这个简单的jQuery选项卡切换代码样式，你可以为网站增添更多动态交互，提高用户...
原生js+css实现tab切换功能
10-14
主要为大家详细介绍了原生js+css实现tab切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
原生js实现tab选项卡切换
12-28
本文实例为大家分享了原生js实现tab选项卡切换效果的代码，供大家参考，具体内容如下 1.html部分  <body> <div id=tab> <div class=tab_menu> <ul> <li class=selected><a>时事</a></li> <li><a>体育</a></li> <li><a>娱乐</a></li> </ul> </div> <div class=tab_box> <div>时事</div> <di
原生table栏切换
09-09
这是一个简单的原生table栏切换，在PC端页面比较常用的一种技术。
js原生tab切换
weixin_58414196的博客
12-26 105
【代码】js原生tab切换。
关于用原生js实现tab栏的切换：
nevercurtain的博客
12-20 7641
今天并不是很忙 ，然后就复习了原生的js。如何用原生js实现tab栏的切换呢？请看下图：当鼠标在女装男装时，显示女装男装。 当鼠标点击鞋子时，出现鞋靴的盒子。 准备一个测试的demo： 举个栗子 如下图 当鼠标点击第一个按钮时，显示第一个盒子。 当点击第二个按钮时，显示第二个盒子。献上 HTML 。。 最后加上js: markdown写代码还不如贴照片的感觉好，说实在话。但是照片上传却
原生js实现tab栏切换功能
weixin_33967071的博客
05-10 1792
原理：还是排他功能。这个tab栏我用了两个排他功能来实现的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ marg...
原生JS实现TAB栏切换
alokka的博客
06-30 9623
之前上传了一个jquery实现tab栏切换的博客，这个是原生js实现tab栏切换的案例，不多说直接上代码！同样复制粘贴就能看到效果哦！ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .Box{ width: 2
【原生js】实现tab栏切换
在热爱技术的路上一直前行。
05-20 713
1. 思路 2. 实现 2.1 代码 <!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"> <
原生js实现tab栏切换
06-08
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1 <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2 <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值