js选项卡

阳光穿透心脏的1/2处 2022-07-30 13:55 213阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 input {background:#CCC;}
    #div1 .active {background:yellow;}
    #div1 div {width:200px; height:200px; background:#CCC; display:none;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.οnlοad=function ()
    {
    	var oTab=new TabSwitch('div1');
    };
    
    function TabSwitch(id)
    {
    	var oDiv=document.getElementById(id);
    	this.aBtn=oDiv.getElementsByTagName('input');
    	this.aDiv=oDiv.getElementsByTagName('div');
    	var i=0;
    	
    	var _this=this;
    	
    	for(i=0;i<this.aBtn.length;i++)
    	{
    		this.aBtn[i].index=i;
    		this.aBtn[i].οnclick=function ()
    		{
    			_this.tab(this);
    		};
    	}
    }
    
    TabSwitch.prototype.tab=function (oBtn)
    {
    	for(i=0;i<this.aBtn.length;i++)
    	{
    		this.aBtn[i].className='';
    		this.aDiv[i].style.display='none';
    	}
    	oBtn.className='active';
    	this.aDiv[oBtn.index].style.display='block';
    };
    </script>
    </head>
    
    <body>
    <div id="div1">
    	<input class="active" type="button" value="教育" />
    	<input type="button" value="财经" />
    	<input type="button" value="aaa" />
    	<div style="display:block;">1asdfasdfds</div>
    	<div>2xzcvxzcv</div>
    	<div>5332342345</div>
    </div>
    </body>
    </html>

效果图![Center][]

[Center]: /images/20220724/e3199fca49c6457e91070c2575a687e4.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用css+js制作选项卡

选项卡制作 ![Image 1][] ![Image 1][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

古城微笑少年丶/ 2022年08月10日 10:59/ 0 赞/ 185 阅读

相关 js选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

阳光穿透心脏的1/2处/ 2022年07月30日 13:55/ 0 赞/ 214 阅读

相关 js 选项卡切换

通过按钮来切换div 先将div隐藏，只显示第一个按钮为高亮，将div隐藏显示第一个div 通过js给按钮设置事件，通过点击的是哪一个按钮来设置其可见和高亮 <!

淩亂°似流年/ 2022年06月15日 12:55/ 0 赞/ 266 阅读

相关选项卡

关于选项卡效果 1. 常规 2. 传参（可设置多个参数值） 3. 回调函数下面是几种参考方法常规方法 <!DOCTYPE html>

淩亂°似流年/ 2022年06月14日 10:37/ 0 赞/ 304 阅读

相关切换选项卡+js+css+html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

柔情只为你懂/ 2022年06月04日 04:24/ 0 赞/ 216 阅读

相关 JS代码实现选项卡功能

在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的

一时失言乱红尘/ 2022年03月20日 07:41/ 0 赞/ 261 阅读

相关 js选项卡功能2

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <!DOCTYPE html> <htm

Dear 丶/ 2022年01月13日 12:49/ 0 赞/ 216 阅读

相关 js/jq 选项卡开发js代码

往往最基础的js代码能够学到很多，成才很快的东西，今天就写了个tab选项卡，希望你和同样的我有所收获。 ![1181828-20190521150134132-8498

悠悠/ 2021年12月07日 13:13/ 0 赞/ 265 阅读

相关 JS实现选项卡切换

面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

悠悠/ 2021年12月03日 10:45/ 0 赞/ 423 阅读

相关 vue.js--Tab选项卡

一.简单tab切换案例使用vue.js实现tab切换很简单，先使用v-for把数据遍历渲染到页面上，v-for中有一个index表示索引，将index作为参数

雨点打透心脏的1/2处/ 2021年09月14日 02:00/ 1 赞/ 537 阅读