胶囊动态选项卡

<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="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="#">iOSa>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>

 二:table固定表头



    
    
    
    
    头部固定的表格
    
    
    
    




姓名 年龄 性别 身高 体重
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312
12345612345123412312

  

转载于:https://www.cnblogs.com/iklhh/p/11016609.html

你可能感兴趣的:(胶囊动态选项卡)