Question

我有以下代码＆amp; 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

如果您不想使用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

Answer 2

您已添加了代码，但是您是否也在HTML的标题部分（.js文件）中添加了jQuery链接。

您需要添加＆lt; script src =“/ site / templates / js / kickstart.js”type =“text / javascript”＆gt; ＆安培;其他js文件

Answer 3

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

css中的Tab功能？

3 个答案: