js 选项卡切换

淩亂°似流年 2022-06-15 12:55 282阅读 0赞

通过按钮来切换div

先将div隐藏，只显示第一个按钮为高亮，将div隐藏显示第一个div

通过js给按钮设置事件，通过点击的是哪一个按钮来设置其可见和高亮

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1 div{
    	display:none;
    	width:300px;
    	height:300px;
    	background:#396;
    }
    #div1 .active{
    	background:#0F0;
    }
    </style>
    
    </head>
    <script>
    window.onload = function()
    {
    	alert('aaa');
    	var div1 = document.getElementById('div1'); //返回一个指定id 的对象的引用
    	var btn = div1.getElementsByTagName('input'); //返回指定标签的对象集合
    	var divarr = div1.getElementsByTagName('div');
    	for (var i=0; i<btn.length; i++) //此循环给按钮注册事件
    	{
    		btn[i].id = i;
    		btn[i].onclick = function()
    		{
    			for(var j=0; j<btn.length; j++){//清空所有效果
    				btn[j].className=''; //将其class设为空，
    				divarr[j].style.display='none'; //设为不可见
    			}
    			this.className = 'active';//给选中的添加效果
    			divarr[this.id].style.display='block';
    		};
    	} 
    };
    </script>
    
    <body>
    <div id="div1">
    	<input class="active" type="button" value="早上"/>
        <input type="button" value="中午"/>
        <input type="button" value="下午"/>
        <input type="button" value="晚上"/><br />
        <div style="display:block;">111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关选项卡切换

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

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

相关 vue 选项卡切换

vue 初学者选项卡切换效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 218 阅读

相关 js选项卡

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

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

相关 js 选项卡切换

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

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

相关切换选项卡+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 赞/ 243 阅读

相关 Tab切换选项卡

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

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

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

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

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

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 368 阅读

相关 tab切换选项卡

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

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

相关 JS实现选项卡切换

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

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