CSS - 当点击标签时默认内容会消失

我有以下情况需要在纯CSS中完成100％无JS包含。CSS - 当点击标签时默认内容会消失

的jsfiddle：http://jsfiddle.net/hen75c3g/3/

现在，当我打开显示默认的内容页面。另外，当我点击第一个标签显示正确的内容。我感兴趣的是，当我点击其他标签时，默认内容将消失并显示相关内容。

这只能在CSS中完成，所以不需要使用Javascript。这可以做到吗？

.accordion { 
 
     width:830px; 
 
     overflow:hidden; 
 
     margin:10px auto; 
 
     color:#474747; 
 
     padding:10px; 
 
     border:1px solid black; 
 
    } 
 
    .accordion section h2 { 
 
     display:none; 
 
    } 
 
    .accordion section h2 a { 
 
     float:left; 
 
     overflow:hidden; 
 
     cursor:pointer; 
 
     margin:10px; 
 
     padding:10px; 
 
     font-size:12px; 
 
     color: #000; 
 
     text-decoration:none; 
 
     width:100%; 
 
    } 
 
    .accordion section p { 
 
     display:none; 
 
    } 
 
    .accordion section:after { 
 
     font-size:24px; 
 
     color:#fff; 
 
     font-weight:bold; 
 
    } 
 
    .accordion section h2 { 
 
     position:relative; 
 
    } 
 
    .accordion section p.default { 
 
     clear:both; 
 
     display:block; 
 
    } 
 
    .accordion section:target p { 
 
     clear:both; 
 
     display:block; 
 
    }

<div class="_m-container"> 
 
     <div class="accordion"> 
 
      <ul class="_m-menu"> 
 
       <li><a href='#tab-1'>Tab 1</a> 
 
    
 
       </li> 
 
       <li><a href='#tab-2'>Tab 2</a> 
 
    
 
       </li> 
 
       <li><a href='#tab-3'>Tab 3</a> 
 
    
 
       </li> 
 
      </ul> 
 
      <section id='tab-1'> 
 
       <h2><a href='#tab-1'>Option 1</a></h2> 
 
    
 
       <p class='default'>Tab1 content.</p> 
 
      </section> 
 
      <section id='tab-2'> 
 
       <h2><a href='#tab-2'>Option 2</a></h2> 
 
    
 
       <p>Tab 2 content.</p> 
 
      </section> 
 
      <section id='tab-3'> 
 
       <h2><a href='#tab-3'>Option 3</a></h2> 
 
    
 
       <p>Tab3 content .</p> 
 
      </section> 
 
     </div> 
 
    </div>

来源

2014-12-02 Herr Nentu'

这不是重复因为结果不是我所需要的。它默认重定向到＃target1，这不是我尝试实现的目标 – 2014-12-02 22:07:21

请看顶部答案中的示例 - 它们几乎完全符合您的要求。即使他们不是*你所想要的，基本问题仍然是一样的 – 2014-12-02 22:13:10

我不相信这可以在CSS来实现。我认为最接近纯css选项卡实现的解决方案将在悬停状态。

但是，要实现你要找的内容与jQuery，你可以做到以下几点：（请注意，我添加了一些类的元素，见http://jsfiddle.net/hen75c3g/18/）

$('.accordion').on('click', '.tab-link', function(){ 
// store the href as a variable 
var tabSelector = $(this).attr('href');  

// hide the previously visible div 
$('.tab-content').removeClass('active'); 

// add active class 
$(tabSelector).addClass('active'); 

return false; 

});

来源

2014-12-02 20:42:49 sdjn

CSS - 当点击标签时默认内容会消失

回答

相关问题