css中的Tab功能？

Question

我有以下代碼& js文件包含在頁面的頂部。

HTML

<ul class="tabs"> 
<li><a href="#tabr1">Tab1</a></li> 
<li><a href="#tabr2">Tab2</a></li> 
<li><a href="#tabr3">Tab3</a></li> 
</ul> 

    <div id="tabr1" class="tab-content">Tab1</div> 
<div id="tabr2" class="tab-content">Tab2</div> 
<div id="tabr3" class="tab-content">Tab3</div> 

CSS

ul.tabs{ 
margin:10px 0 -1px 0; 
padding:0; 
width:100%; 
border-bottom:1px solid #e5e5e5; 
float:left; 
    } 

    ul.tabs li{ 
list-style-type:none; 
margin:0 2px 0 0; 
padding:0; 
display:inline-block; 
*display:inline;/*IE ONLY*/ 
position:relative; 
top:0; 
left:0; 
*top:1px;/*IE 7 ONLY*/ 
zoom:1; 
} 

ul.tabs li a{ 
text-decoration:none; 
color:#666; 
display:inline-block; 
padding:9px 15px; 
position: relative; 
top:0; 
left:0; 
line-height:100%; 
background:#f5f5f5; 
box-shadow: inset 0px -3px 3px rgba(0,0,0,0.03); 
border:1px solid #e5e5e5; 
border-bottom:0; 
font-size:0.9em; 
zoom:1; 
} 

ul.tabs li a:hover{ 
background:#fff; 
} 

ul.tabs li.current a{ 
position:relative; 
top:1px; 
left:0; 
background:#fff; 
box-shadow: none; 
color:#222; 
} 

.tab-content{ 
border:1px solid #efefef; 
border-left:1px solid #e5e5e5; 
clear:both; 
padding:20px; 
margin:0 0 40px 0; 
} 

當我使用這個代碼在我的程序的所有選項卡都在同一個頁面上組裝。當選項卡處於活動狀態時，我無法隱藏其他選項卡。

什麼將是這個

的原因，但我檢查這個在這個site。

如果有人有任何建議？

Answer 1

Fiddle

此幫助你解決你的問題在許多方面。

<div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab One</label> 

     <div class="content"> 
      <p>Stuff for Tab One</p> 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab Two</label> 

     <div class="content"> 
      <p>Stuff for Tab Two</p> 

      <img src="http://placekitten.com/200/100"> 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      <p>Stuff for Tab Three</p> 

      <img src="http://placedog.com/200/100"> 
     </div> 
    </div> 

Answer 2

您已經添加了代碼，但是您是否還在HTML的標題部分（.js文件）中添加了jQuery鏈接。

您需要添加< SCRIPT SRC = 「/網站/模板/ JS/kickstart.js」 類型= 「文/ JavaScript的」 > &其他js文件

Answer 3

如果你不想再使用js文件這裏是純CSS標籤

HTML

<div class="tabs"> 

     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked> 
      <label for="tab-1">Tab One</label> 

      <div class="content"> 
       <p>Stuff for Tab One</p> 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Tab Two</label> 

      <div class="content"> 
       <p>Stuff for Tab Two</p> 

       <img src="http://placekitten.com/200/100"> 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="tab-3" name="tab-group-1"> 
      <label for="tab-3">Tab Three</label> 

      <div class="content"> 
       <p>Stuff for Tab Three</p> 

       <img src="http://placedog.com/200/100"> 
      </div> 
     </div> 

CSS

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; cursor:pointer 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 

    overflow: hidden; 
} 
.content > * { 
    opacity: 0; 

    -webkit-transform: translate3d(0, 0, 0); 

    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -ms-transform:  translateX(-100%); 
    -o-transform:  translateX(-100%); 

    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -ms-transition:  all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
} 
[type=radio]:checked ~ label ~ .content > * { 
    opacity: 1; 

    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -ms-transform:  translateX(0); 
    -o-transform:  translateX(0); 
} 

LIVE DEMO