32、JavaScript中选项卡的实现

ゝ一纸荒年。 2022-09-21 11:51 108阅读 0赞

1、CSS代码

<style>
    			#div1 input {
    				background: #CCC;
    			}
    			
    			#div1 .active {
    				background: yellow;
    			}
    			
    			#div1 div {
    				width: 200px;
    				height: 200px;
    				background: #CCC;
    				display: none;
    			}
    		</style>

2、JavaScript代码

<script>
    			window.onload = function() {
    				tabSwitch('div1');
    			};
    			/*选项卡的实现原理,先把所有的隐藏，再把当前的显示*/
    			function tabSwitch(id) {
    				var oDiv = document.getElementById(id);
    				var aBtn = oDiv.getElementsByTagName('input');
    				var aDiv = oDiv.getElementsByTagName('div');
    				var i = 0;
    				/*默认的情况下是,显示第一个按钮和第一个DIV*/
    				for (i = 0; i < aBtn.length; i++) {
    					aBtn[i].index = i;
    					aBtn[i].onclick = function() {
    						/*1、首先将所有的按钮的样式去掉,和隐藏所有的DIV*/
    						for (i = 0; i < aBtn.length; i++) {
    							aBtn[i].className = '';
    							aDiv[i].style.display = 'none';
    						}
    						/*2、在给当前的按钮加上class样式,和显示具体的一个DIV*/
    						this.className = 'active';
    						aDiv[this.index].style.display = 'block';
    					};
    				}
    			}
    		</script>

3、Html代码

<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>

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript编程实现tab选项卡切换的效果+1

之前在“圳品”信息系统使用了tab选项卡来显示信息，详见： [JavaScript编程实现tab选项卡切换的效果][JavaScript_tab] 在tab选项卡中使用其它

ゞ浴缸里的玫瑰/ 2024年03月23日 10:02/ 0 赞/ 32 阅读

相关 32、JavaScript中选项卡的实现

1、CSS代码 <style> div1 input { background: CCC; }

ゝ一纸荒年。/ 2022年09月21日 11:51/ 0 赞/ 109 阅读

相关用JavaScript代码编写选项卡

选项卡其实在很多网站站中可以看到。类似于切换导航。代码如下： <!DOCTYPE html> <html lang="en"> <head>

喜欢ヅ旅行/ 2022年06月07日 02:13/ 0 赞/ 142 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 135 阅读

相关 javascript选项卡功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

系统管理员/ 2022年05月12日 02:44/ 0 赞/ 164 阅读

相关 javascript选项卡嵌套的实现

标题 <style> {margin: 0px;padding: 0px;list-style: none;text-decoration

╰半夏微凉°/ 2022年01月28日 00:55/ 0 赞/ 206 阅读

相关 javascript,tab选项卡的实现和应用案例

选项卡案例 <style type="text/css"> .btnBox,.contentBox{ display: none;

迷南。/ 2022年01月22日 23:25/ 0 赞/ 171 阅读

相关 JS实现选项卡切换

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

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

相关 javascript 简易选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年11月23日 00:08/ 0 赞/ 248 阅读

相关网页Tab选项卡实现

转自:[慕课网][Link 1] 效果图如下： ![20151216175601456][] html代码部分: <!doctype html>

港控/mmm°/ 2021年06月10日 20:41/ 0 赞/ 488 阅读