使用JS实现简单的选项卡功能

最新推荐文章于 2023-11-11 09:49:22 发布
最新推荐文章于 2023-11-11 09:49:22 发布
阅读量296 收藏 5
点赞数
分类专栏： 函数 js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ikEason_/article/details/117078219
版权
js 同时被 2 个专栏收录
19 篇文章 2 订阅
订阅专栏
函数
12 篇文章 0 订阅
订阅专栏

首先我们来写HTML代码，构建出整体结构

<!DOCTYPE html>
<div id="news">
			<ul class="clearfix">
				<li class="active"><a href="">国内</a></li>
				<li><a href="">国际</a></li>
				<li><a href="">财金</a></li>
				<li><a href="">娱乐</a></li>
			</ul>              
			<div id="contet">
				<p style="display: block;">国内新闻</p>
				<p>国际新闻</p>
				<p>财金新闻</p>
				<p>娱乐新闻</p>
			</div>
		</div>

接着我们使用css代码构建出样式
 代码如下：

<style type="text/css">
			*{margin: 0; padding: 0;}
			ul,li,p{display: block;}
			ul{list-style: none;}
			.clearfix::after{height: 0;display: block;content: '-';clear: both; visibility: hidden;}
			#news{
				width: 600px;height: 400px;overflow: hidden;padding: 5px;margin: 50px auto;
				border: 1px solid #ccc;
			}
			#news ul{width:100%; border-bottom: 2px solid darkcyan;}
			#news ul li{width:80px;height: 30px;line-height: 30px;text-align: center;
				float: left;cursor: pointer;margin-right:3px;
			}
			#news #contet{height: 368px; overflow: hidden;}
			#news #contet p{height: 368px; text-align: center;line-height: 368px; background: #f2f2f2;overflow: hidden;}
			.normal{background: #ccc; color: black;}
			.active{background: orange; color: white;}
		</style>

最后是js的代码，实现选项卡功能

代码如下：

<script type="text/javascript">
			//onload：经过   onclick:点击
			window.onload=function (){
				//1.获取
				var liObj=document.getElementsByTagName("li");
				var pObj=document.getElementsByTagName("p");
				//02初始化
				for(i=0; i<liObj.length; i++){
					liObj[i].className="normal";
					pObj[i].style.display="none";
				}
				liObj[0].className="active";
				pObj[0].style.display="block";
				//03鼠标经过li onmouseover:鼠标经过
				for(i=0; i<liObj.length; i++){
					liObj[i].index=i;	//重要
					liObj[i].onmouseover=function(){
						//让所有元素归零
						for(var i=0; i<liObj.length; i++){
							liObj[i].className="normal";
							pObj[i].style.display="none";
						}
						this.className="active";//鼠标经过的li
						pObj[this.index].style.display="block";//
						
					}
				}
			}
		</script>

结果：
在这里插入图片描述
在这里插入图片描述

不停止的程序
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简单选项卡功能
10-18
总结来说，JavaScript实现选项卡功能的关键在于监听事件（如点击），通过改变CSS属性（如display）来控制内容的显示与隐藏。同时，通过设置类名（如.active或.act）可以实现更复杂的样式切换效果。这个简单实例为...
js实现选项卡
qq_52440306的博客
09-23 6912
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
JS实现选项卡功能
qingdouxiaohua的博客
09-19 672
这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。
利用JS实现简单选项卡功能
TianXuab的博客
07-01 971
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
JS-----选项卡切换
qq_63322025的博客
08-27 3770
tab选项卡如何实现切换，其中涉及获取元素的内容并修改，循环，遍历知识
JS选项卡
xing942012的博客
11-25 2434
我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好 <ul> <li class="active">周一</li> <li>周三</li> <li>周五</li> </ul> <div class="box1 block">医务科</div> <div class="box2">警卫科</div>
js实现简单选项卡制作
10-14
在本文中，我们将探讨如何使用JavaScript实现一个简单的选项卡组件。选项卡是一种常见的用户界面元素，用于组织和展示多个相关的但不同时显示的内容块。在这个例子中，我们将创建一个包含HTML、CSS和JavaScript三个...
分步解析JavaScript实现tab选项卡自动切换功能
11-26
在JavaScript编程中，实现选项卡自动切换功能是一个常见的需求，特别是在网页设计中。这个功能使得用户无需手动点击或滑动，就能自动浏览不同内容区域。本文将深入解析如何使用JavaScript来实现这一功能。 首先，...
原生js实现选项卡功能
11-28
总结一下，原生JavaScript实现选项卡功能的关键点包括： 1. HTML结构的创建，包括选项卡标签和内容区域。 2. CSS样式定义，控制元素的显示与隐藏。 3. JavaScript代码，处理按钮点击事件，切换内容的显示状态。 4. ...
用js实现选项卡的功能
有趣的灵魂万里挑一,好看的皮囊你又没有
04-06 688
用js实现选项卡功能。
js 选项卡 实现方法
zc108511的博客
11-19 382
2.然后用querySelectorAll（）方法获取span元素和div元素，这样返回的是一个伪数组，所以要先循环给每一span绑定单击事件，然后再循环给每一个div和span添加一个空类名。当点击某选项的时候，后会先执行清空类名，然后把设置好样式的类名赋给当前点击的标签。
JavaScript如何实现 选项卡功能
最新发布
qq_60504665的博客
11-11 294
首先我们这里有五个li，获取过来的li元素是以伪数组的形式输出的，所以我们可以用for循环来遍历这个伪数组为每个li添加单击事件，接下来就是写函数了，这里就要用到上面所讲的排他思想，试想我们每点击一次li都像是点击上面的按钮一样，我们用for循环去掉他的样式，然后再给当前点击的li加上样式，这样的话，所点击的li就会有红色背景和白色的字了，但是下面的内容还是不变的。这里我们首先分成两大步，第一步先获取元素，我就不多说了。有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写。
【JavaScript】实现网页中的选项卡
qq_55930097的博客
07-21 853
总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。
JS简单选项卡
XiaoYu0543的博客
07-01 485
一个简单的选项卡功能，小白勿喷谢谢 ，希望能帮助到大家
如何用JS实现选项卡功能
2301_79420857的博客
10-27 370
先执行循环内容区，再执行选卡并添加点击事件，点击选卡时它的背景颜色会改变，另外两个内容区会隐藏。以上就是用JS实现选项卡功能的全部流程，当然不止这一种方法，快去多多练习尝试！给选项卡和内容区设置它的初始背景颜色，方便区分点击时显示的颜色。结构写完之后当然要添加样式了，使页面变得更加美观！选卡部分点击时要变色，内容部分要隐藏。把内容一内容二隐藏起来。
js选项卡功能制作
zybijiso666的博客
09-24 240
js选项卡
JS——选项卡
sunshine_0880的博客
07-14 8643
轮番图也是用类似的效果和方法。效果展示：要做到此效果要想到几点：① 当选择当前项的时候，选择项要具备被选择的样式，同时显示当前内容。② 当选择该项的时候，要把其他项的样式去掉，即样式置为空，其他内容隐藏。代码展示：HTML代码&lt;div class="ele"&gt; &lt;ul&gt; &lt;li class="active"&gt;&lt;a href="#"&gt
js选项卡
qq_47959958的博客
02-17 585
老板给安排的任务，其实我到现在也不知道怎么描述，然后就搜了半天，终于知道它的学术用语——js选项卡。 下面我尽量描述一下，方便后人检索。 简而言之就是页面的一部分进行跳转，另外一部分保持不动。 https://c.runoob.com/codedemo/3159/ html <p>点击各个选项卡查看内容:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Lon
vue 实现选项卡功能
05-30
实现选项卡功能可以使用 Vue.js 的 v-bind 和 v-show 指令。具体步骤如下： 1. 在 data 中定义一个变量来控制选项卡的显示状态，例如 currentTab，默认为第一个选项卡。 ``` data() { return { currentTab: 'tab1...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值