tab标签页简单用法

最新推荐文章于 2024-09-26 14:24:29 发布

qhxnls2

最新推荐文章于 2024-09-26 14:24:29 发布

阅读量278

点赞数

分类专栏： UI 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qhxnls2/article/details/83632547

版权

UI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>

<head>
<style>
.tab{width:300px;height:40px;}
.off{width:50px;height:20px; border:1px #999 solid; float:left;}
</style>

<script language="javascript">
function showTab(i){
if(i=='0' || i == 0){
document.getElementById('test0').style.display='';
document.getElementById('test1').style.display='none';
document.getElementById('test2').style.display='none';
}else if(i=='1' || i == 1){
document.getElementById('test0').style.display='none';
document.getElementById('test1').style.display='';
document.getElementById('test2').style.display='none';
}else if(i=='2' || i == 2){
document.getElementById('test0').style.display='none';
document.getElementById('test1').style.display='none';
document.getElementById('test2').style.display='';
}
}
</script>
</head>

<body>

<div class="tab">
<div class="off" οnclick="showTab('0')">测试0</div>
<div class="off" οnclick="showTab('1')">测试1</div>
<div class="off" οnclick="showTab('2')"> 测试2</div>
</div>
</body>

<div id="test0"> this is the test zero </div>

<div id="test1" style="display:none;"> this is the test one </div>

<div id="test2" style="display:none;"> this is the test two </div>

</html>