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();">
<input id="myid2" name=fls type=button value="其他1 " class="j3btn" onclick="javascript:f_switch2();">
<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');
})
});
结束,喜欢的点个赞,欢迎随时转发评论