-1

我在页面顶部包含以下代码和 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;
}

当我在我的程序中使用此代码时，所有选项卡都在同一页面中组装。当标签处于活动状态时，我无法隐藏其他标签。

这将是什么原因

但我在这个网站上检查了这个。

如果有人有任何建议？

4

3 回答 3

2

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

现场演示

于 2012-10-15T11:46:35.190 回答
1

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

您需要添加 <script src="/site/templates/js/kickstart.js" type="text/javascript"> 和其他 js 文件

于 2012-10-15T11:31:13.480 回答
0

小提琴

这可以帮助您以多种方式解决问题。

   <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>
于 2012-10-27T06:20:08.487 回答