选项卡切换

Posted 2020-10-13 v斌v

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡切换相关的知识，希望对你有一定的参考价值。

<!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 type="text/css">
#tab input {
    background: #999;
    border: 1px solid #F00;
}
#tab .active {
    background: #000;
    color:#FFF;
}
#tab div {
    width:400px; 
    height:300px; 
    display:none;
    padding: 10px;
    background: #CCC;
    border: 1px solid #F00;
}
</style>
</head>

<body>
<script type="text/javascript">       
window.onload = function(){
    var tab = new Tab("tab");
}

function Tab(id){
    var _this = this;
    var tabBox = document.getElementById(id);
    this.tabBtn = tabBox.getElementsByTagName(‘input‘);
    this.tabDiv = tabBox.getElementsByTagName(‘div‘);
    //console.log(this);
    for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        this.tabBtn[i].onclick = function(){
             //注意参数this代表的是this.tabBtn[i]，即input按钮
             _this.clickBtn(this);
        };
    }
};
 //将点击的按钮以参数的形式传入
Tab.prototype.clickBtn = function(an){
    for(var j=0;j<this.tabBtn.length;j++){
    this.tabBtn[j].className=‘‘;
    this.tabDiv[j].style.display=‘none‘;
    }
    an.className=‘active‘;
    this.tabDiv[an.index].style.display=‘block‘;
};
 
</script>
<body>
    <div id="tab">
        <input type="button" value="1" class="active" />
        <input type="button" value="2" />
        <input type="button" value="3" />
        <div style="display:block;">1111111</div>
        <div>22222222</div>
        <div>33333333</div>
    </div>
</body>
</html>

以上是关于选项卡切换的主要内容，如果未能解决你的问题，请参考以下文章

Android：使用选项卡在不同片段之间切换

以编程方式使用选项卡更改片段的选项卡索引

IllegalArgumentException：快速切换 ActionBar 选项卡时没有找到片段 id 的视图

Android - 选项卡式片段

在 BottomNavigationView 中切换选项卡时出现延迟

选项卡内的片段