單擊tab2時，Tab1數據仍然可見

我想使用純html012，html，css和javascript純創建網頁。我創建了一個包含多個選項卡的網頁。每個選項卡顯示從不同的html文件加載的數據。請找到下面的代碼：單擊tab2時，Tab1數據仍然可見

<div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab1</label>  <div class="content" style="width:700px;height:700px;">  <iframe src="tab1.html"></iframe> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab2</label> <div class="content"> <iframe src="tab2.html"></iframe> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Tab3</label> <div class="content"> <iframe src="tab3.html"></iframe> </div> </div> </div>

我試圖解決以下項目：

當TAB1用戶點擊，則顯示的內容，並再次當用戶點擊TAB2，仍然是TAB1含量被視爲如下所示的小提琴。

Fiddle

來源

2016-12-15 joann

問題是，tab1不會消失，當你點擊它時，它會被其他標籤覆蓋。你可以嘗試隱藏其內容，當你點擊其他標籤。 – sebasaenz

@sebasaenz - 你可以請建議如何實現使用JavaScript，因爲我試圖找出解決方案，但無法找到合適的使用JavaScript。我不能使用任何其他框架，所以需要使用JavaScript來實現這一點。 – joann

您只需要更多mi也不是東西：

 [type=radio]:checked ~ label ~ .content { 
      z-index: 1; 
      display: block; 
     } 

     [type=radio] ~ .content 
     { 
      display: none; 
     }

來源

2016-12-15 04:14:05

你是不是隱藏的標籤，而不是你是覆蓋每個選項卡..在html你所做的是正確的。。只有你的CSS需要的代碼一點點線

你添加display: none;content類

，然後添加此塊

[type=radio]:checked ~ .content { 
     display: block !important; 
    }

這將顯示您的radio:checked

plunker內div.content： here

來源

2016-12-15 04:11:45 noobHere

單擊tab2時，Tab1數據仍然可見

回答

相關問題