胶囊动态选项卡

Posted iklhh

tags:

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

<html>
<head>
<title>Bootstrap 实例 - 基本的胶囊式导航菜单</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills" id="list_1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">ios</a></li>
</ul>
<div class="tab-content" id=‘bigbox‘>
         <div class="tab-pane active" id="one-pill">
            胶囊1对应的内容: one 
         </div>
         <div class="tab-pane" id="two-pill">
             胶囊2对应的内容:two 
         </div>
         <div class="tab-pane" id="three-pill">
          胶囊3对应的内容:three 
         </div>
 </div>

<script>
window.onload=function()
                  var ul=document.getElementById("list_1")
                  var li=ul.getElementsByTagName("li")
                  var div=document.getElementById("bigbox")
                  var divchirld=div.getElementsByTagName("div")
                  for(let i=0;i<li.length;i++)
                      li[i].onclick=function()
                          for(j=0;j<li.length;j++)
                              li[j].className=""
                              divchirld[j].style.display="none";
                                
                      this.className="active"
                      divchirld[i].style.display="block";
                      
                  
                 
</script>
</body>
</html>

 

以上是关于胶囊动态选项卡的主要内容,如果未能解决你的问题,请参考以下文章

删除选项卡时在 ActionBar 选项卡片段中运行代码

如何通过动态单击按钮来更改选项卡标题名称?

使用PageChangeListener动态更改选项卡图标的颜色

选项卡执行android中下一个片段中存在的代码

在动态 viewpager 片段中创建 recyclerviews

从父片段到选项卡片段的接口侦听器不起作用