js实现选项卡效果

最新推荐文章于 2023-04-11 23:23:07 发布
最新推荐文章于 2023-04-11 23:23:07 发布
阅读量194 收藏
点赞数
分类专栏： javascript基础 文章标签： 选项卡 索引
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuxufeifei/article/details/84350410
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
	font-size: 14px;
	}
		span{
			display: inline-block;
			width: 189px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			cursor: pointer;
		}
		.active{
			border-bottom: 4px solid #c3b598;
		}
		.login_a{
			width: 325px;
			height: 325px;
			/*border: 1px solid #ccc;*/
			text-align: center;
			line-height: 325px;
		}
		.login_b{
			width: 325px;
			height: 325px;
			/*border: 1px solid #ccc;*/
			text-align: center;
			line-height: 325px;
			display: none;
		}
	</style>
</head>
<body>
	<div class="login">
		<span class="active">登录</span><span>注册</span>
		<div class="login_a">登录板块</div>
		<div class="login_b">注册板块</div>
	</div>

	<script type="text/javascript">
		let divpages = document.querySelectorAll('.login>div');
		console.log(divpages);
		let navs = document.querySelectorAll('.login>span');

		for(let i=0;i<navs.length;i++){
			navs[i].onclick = function(e){
				let activedNav = this.parentNode.querySelector('.active');
				if(activedNav == this){
					return;
				}
				activedNav.className = '';
				this.className = 'active';
				let index = searchNavIndex(this);
				console.log(index);
				let activeIndex = searchNavIndex(activedNav);
				console.log(activeIndex);
				if(index > activeIndex){
					divpages[activeIndex].style.display = 'none';
					divpages[index].style.display = 'block';
				}
				else{
					 divpages[activeIndex].style.display = 'none';
        			divpages[index].style.display = 'block';
				}
			}

		}

			//	获取索引
		function searchNavIndex(navItem){
		    let index = -1;
		    for(let i = 0 ;i < navs.length; i++){
		      if(navs[i] === navItem){
		        index = i;
		        break;
		      }
		    }
		    return index;
		  }
	</script>

</body>
</html>
zhuxufeifei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现选项卡功能
11-28
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function(){//原生js选项卡写法 var oDiv = document.getElem
使用js实现选项卡效果
最新发布
xiaocantongxue的博客
08-29 161
【代码】使用js实现选项卡效果。
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2070
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
js选项卡效果
Hermia_yuan的博客
03-27 976
documentAPI： getElementById() 返回具有指定 ID 属性值的第一个对象的一个引用 getElementsByTagName 返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。 getElementsByclassName属性 设置或返回元素的 class 属性 <body> <!--导航栏部分HTML代码--> <div class="box"> &lt...
原生js实现切换选项卡效果，点击某一选项展示对应内容【含完整html代码】
qq_40261601的博客
02-25 1742
CSS1、左右布局，设置选项卡左浮动，内容右浮动。为防止当子元素设置浮动脱标后，父元素卡片塌陷，可以设置父元素overflow: hidden;，利用BFC机制消除浮动带来的影响。2、右侧内容展示区，文字和图片用一个包裹，设置display: none;，即默认不加载。再定义一个激活类，设置display: block;，激活状态下加载div。JavaScript 1、利用事件委托，为父元素添加监听事件onclick，判断用户点击的是哪个选项卡。2、每次点击事件发生后，将点击的选项卡对
基于JavaScript实现选项卡效果
01-21
一个简单的选项卡的关键在于：当切换页面时，如何让所选的选项和与其对应的内容同时出现，并且在选择其他的内容时，不影响新的内容的显示。 其中用到两个很关键的思想： 1.为对象增加index属性，并通过this对...
JS实现选项卡效果的代码实例
10-16
主要介绍了JS选项卡效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS实现选项卡效果
m0_46647730的博客
06-30 313
选项卡
块元素居中方式
gklcsdn的博客
12-10 756
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS+DIV+CSS排版布局实现美观的选项卡效果
11-25
本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下： 这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
一个简单好用的JS TAB选项卡效果
11-24
总共3KB div结构拓展性强 特点：结构简单,兼容性好,可扩展性强,特别适合前端新手, 部分代码演示: <div class="nTab"> <div class="TabTitle"> <ul id="myTab"> <li class="active" onmouseover="nTabs(this,0);">ASP</li> <li class="normal" onmouseover="nTabs(this,1);">PHP2</li> <li class="normal" onmouseover="nTabs(this,2);">PHP3</li> <li class="normal" onmouseover="nTabs(this,3);">PHP4</li> </ul> </div> <div class="TabContent"> <div id="myTab_Content0">同一页面，滑动门，选项卡同在</div> <div id="myTab_Content1" class="none">兼容性好2</div> <div id="myTab_Content2" class="none">兼容性好3</div> <div id="myTab_Content3" class="none">兼容性好4</div> </div> </div>
很棒的js Tab选项卡切换效果
10-21
主要介绍了很棒的js Tab选项卡切换效果，简单的选项卡切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现tabs选项卡切换效果(自写原生js)
12-01
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 效果图如下：  html代码： 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>js-tabs</title> <link rel=”stylesheet” type=”text/css” href=”css/base.css” media=”all”/> <style type=”text/css”
js实现选项卡
qq_52440306的博客
09-23 6870
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
如何利用js实现选项卡效果（超简单）
weixin_46236141的博客
04-02 5196
在开始写我们的选项卡之前，先来看一下最终实现的大概效果： 那废话不多说，接下来就看看如何去实现这个效果。 首先，利用我们的 html 和 css 基础，写出选项卡的基本布局： html代码： <div class="news"> <ul> <li class="active">标题1</li> <li>标题2</li&g...
使用JS实现简单的选项卡功能
Max的博客
08-17 1万+
首先我们来写HTML代码，构建出整体结构 &amp;amp;amp;n
[前端] html+css+javascript 实现选项卡切换效果
热门推荐
童凌的技术博客
03-28 4万+
用html+css+js实现选项卡切换效果使用之前学过的综合知识，实现一些新闻门户网站上的常见选项卡效果：文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简
js实现选项卡淡入效果
05-11
可以使用jQuery实现选项卡淡入效果，具体代码如下： HTML部分： ```html <li><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a></li> 这是选项...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值