Tab切换选项卡

左手的ㄟ右手 2022-05-09 06:58 329阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Tab切换选项卡</title>
    <style>
    #div1 .active {background:yellow;}
    #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
    </style>
    <script>
    //此处编写代码，实现tab标签,鼠标单击某个按钮显示对应的
    	window.onload=function (){
    				var oDiv=document.getElementById('div1');
    				var aBtn=oDiv.getElementsByTagName('input');
    				var aDiv=oDiv.getElementsByTagName('div');
    				
    				
    				for(var i=0;i<aBtn.length;i++){			
    					
    					aBtn[i].index=i;			
    					aBtn[i].onclick=function (){
    						
    						for(var i=0;i<aBtn.length;i++){	
    							aBtn[i].className='';
    							aDiv[i].style.display='none';
    						}
    						this.className='active';
    						aDiv[this.index].style.display='block';
    					}
    				}
    			}
    </script>
    </head>
    
    <body>
    <div id="div1">
    	<input class="active" type="button" value="教育" />
    	<input type="button" value="培训" />
    	<input type="button" value="招生" />
    	<input type="button" value="出国" />
        <div style="display:block;">教育</div>
        <div>培训</div>
        <div>招生</div>
        <div>出国</div>
    </div>
    </body>
    </html>

![70][]

[70]: /images/20220509/14152ad3a9be4b1f8e07a8d4983ca1b5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。因为两者都是屏幕高度不够，而设计出

ゞ浴缸里的玫瑰/ 2023年01月09日 03:51/ 0 赞/ 191 阅读

相关 jQuery特效Tab切换栏选项卡demo

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，

约定不等于承诺〃/ 2022年11月10日 14:19/ 0 赞/ 244 阅读

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 265 阅读

相关 Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中，需要实现Tab选项卡切换的效果，但Axure中并没有类似于Tab控件的部件，所以可以用Axure中的动态面板(Dyn

àì夳堔傛蜴生んèń/ 2022年08月13日 19:45/ 0 赞/ 275 阅读

相关 JQ实现——TAB选项卡切换登录界面

今天，分享一个简单实用的TAB选项卡切换登录界面。 ![这里写图片描述][70] ![这里写图片描述][70 1] 主页部分 <!DOCTYPE htm

柔光的暖阳◎/ 2022年05月23日 12:12/ 0 赞/ 376 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 330 阅读

相关纯JS实现tab选项卡切换效果

今天学到的用js写选项卡，有高亮效果，废话不多说，直接上代码吧！！！注意事项：css代码中有一个隐藏其他div的属性， display: none;这个一定要注意，要不

秒速五厘米/ 2022年04月08日 13:53/ 0 赞/ 365 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 423 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 462 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 436 阅读