html - cssのタブ機能?

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;
}

プログラムでこのコードを使用すると、すべてのタブが同じページにまとめられます。タブがアクティブなときに他のタブを非表示にすることはできません。

その理由は何でしょう

しかし、私はこのサイトでこれをチェックします。

誰か提案があれば??

Answer 1

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);
}

ライブデモ

Answer 2

コードを追加しましたが、HTML のヘッダー セクション (.js ファイル) に jQuery リンクも追加しましたか。

<script src="/site/templates/js/kickstart.js" type="text/javascript"> & その他の js ファイルを追加する必要があります

Answer 3

フィドル

これは、さまざまな方法で問題を解決するのに役立ちます。

   <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>