手写tab选项卡

最新推荐文章于 2024-04-14 15:25:06 发布

好诡异

最新推荐文章于 2024-04-14 15:25:06 发布

阅读量719

点赞数

本文链接：https://blog.csdn.net/lovely960823/article/details/93711049

版权

tab选项卡，我原来也不知道这个叫什么，我只知道，同一个页面有多个按钮，点击不同的按钮，显示的数据不同，后来慢慢了解到的，今天来实现一个tab选项卡，非常简单。
这里先献上效果图。默认加载第一个按钮数据的信息
在这里插入图片，默认描述
点击的时候显示第二个按钮的信息
在这里插入图片描述
这样类推

开始上主要实现代码

 //只有三个div在主页面，这三个div里面我已经放上数据了，每个div都有自己对应的点击事件
    <body  scroll=auto onload="init()"   style="tab-interval:21pt; text-justify-trim:punctuation; text-align: center;background-color: #FFFFFF" >
    		<table>
    			<tr>
    				<td colspan='3' align="center">
    					<input id="myid1" name=sch type=button value="个人信息" class="j3btn" onclick="javascript:f_switch1();">
    					&nbsp;&nbsp;&nbsp;
    					<input id="myid2" name=fls type=button value="其他1 " class="j3btn" onclick="javascript:f_switch2();">
    					&nbsp;&nbsp;&nbsp;
    					<input id="myid3" name=fls type=button value="其他2" class="j3btn" onclick="javascript:f_switch3();">
    				</td>
    			</tr>
    			<tr>
    				<td class="clientTd" valign="middle" width="98%">
    					<div id="div1" style="overflow: auto; height: 100%;background-color: #fff;">5555555</div>
    					<div id="div2" style="overflow: auto; height: 100%;background-color: #fff;display:none">88888</div>
    					<div id="div3" style="overflow: auto; height: 100%;background-color: #fff;display:none">99999</div>
    				</td>
    			</tr>
    		</table>   
    	</body>

现在来看每个点击事件的触发实现，非常简单

<script type="text/javascript">
		function f_switch1(){  
			$("#div1").show();
			$("#div1").siblings().hide();
		}
		function f_switch2(){
			$("#div2").show();
			$("#div2").siblings().hide();
		}
		function f_switch3(){
			$("#div3").show();
			$("#div3").siblings().hide();
		}
	</script>
	//点击的时候颜色发生改变
$(document).ready(function(){
			 $("input").click(function() {
			 	$(this).removeClass('j3btn'); //被点击的移除样式，同级的添加样式
				$(this).siblings('input').addClass('j3btn'); 
			})
		});

结束，喜欢的点个赞，欢迎随时转发评论

好诡异

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写tab选项卡

tab选项卡，我原来也不知道这个叫什么，我只知道，同一个页面有多个按钮，点击不同的按钮，显示的数据不同，后来慢慢了解到的，今天来实现一个tab选项卡，非常简单。这里先献上效果图。默认加载第一个按钮数据的信息点击的时候显示第二个按钮的信息这样类推开始上主要实现代码 //只有三个div在主页面，这三个div里面我已经放上数据了，每个div都有自己对应的点击事件 <body...
复制链接

扫一扫