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 - 當點擊標籤時默認內容會消失

回答

相關問題