如何使只有HTML CSS

UL標籤試圖找出如何做到這一點。我有這種風格，但我希望在點擊標籤後發生一些事情。我希望與標籤類名稱的div顯示和隱藏，當我點擊標籤。我假設如何工作。現在，當我點擊標籤沒有任何反應。如何使只有HTML CSS

這裏是我的HTML

<style type="text/css"> 
     ul.tabs { 
      display: table; 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 

     ul.tabs>li { 
      float: left; 
      padding: 10px; 
      background-color: lightgray; 
     } 

     ul.tabs>li:hover { 
      background-color: lightgray; 
     } 

     ul.tabs>li.selected { 
      background-color: lightgray; 
     } 

     div.content { 
      border: 1px solid black; 
     } 

     ul { overflow: auto; } 

     div.content { clear: both; } 
    </style> 
<body> 
    <ul class="tabs"> 
     <li><a href="#tab1">Description</a></li> 
     <li><a href="#tab2">Specs</a></li> 
    </ul> 
    <div class="pane"> 
     <div class="tab1"> 
      <div><h2>Hello</h2></div> 
     <div /> 
     <div>Hello hello hello.</div> 
     <div /> 
     <div>Goodbye goodbye, goodbye</div> 
     <div /> 
     <div /> 

     </div> 
     <div class="tab2" style="display:none;"> 
     <div><h2>Hello2</h2></div> 
     <div /> 
     <div>Hello2 hello2 hello2.</div> 
     <div /> 
     <div>Goodbye2 goodbye2, goodbye2</div> 
     <div /> 
     </div> 
    </div> 
    <div class="content"> 
     This should really appear on a new line. 
    </div> 
</body>

來源

2012-01-03 Michiko

您的 s不要去任何地方，是由設計？還是你的意思是tab1和tab2類是id？ – 2012-01-03 08:48:18

標準答案：你不能。不幸的是，純粹的HTML/CSS2沒有辦法做到這一點。我們可以把下拉菜單與:hover僞類CSS，但有沒有類似的點擊。看看其中一個 Javascript-based solutions。

機密答案： CSS3 [那種]支持這一點。但是你必須創建單選按鈕[怪異]，並且它在IE7/8中不受支持。 If you dare...

如果你不介意使用Javascript，這裏有一個快速的解決方案。首先重新格式化您的HTML。沒有必要把在<div>小號<h2> s，而使用<br />的休息，這就是它的存在了。此外，我更改標籤<div> s使用id的而不是類。如果您有一個元素的唯一標識符，請使用id。

<ul class="tabs"> 
    <li><a href="#tab1">Description</a></li> 
    <li><a href="#tab2">Specs</a></li> 
</ul> 
<div class="pane"> 
    <div id="tab1"> 
     <h2>Hello</h2> 
     <p>Hello hello hello.</p> 
     <p>Goodbye goodbye, goodbye</p> 
    </div> 
    <div id="tab2" style="display:none;"> 
     <h2>Hello2</h2> 
     <p>Hello2 hello2 hello2.</p> 
     <p>Goodbye2 goodbye2, goodbye2</p> 
    </div> 
</div> 
<div class="content">This should really appear on a new line.</div>

沒有碰你的CSS。

對於JavaScript，我推薦使用jQuery。它真的簡化了事情。所有你需要的是這行代碼：

$(document).ready(function() { 
    $("ul.tabs a").click(function() { 
     $(".pane div").hide(); 
     $($(this).attr("href")).show(); 
    }); 
})

基本上，一旦該頁面已準備就緒[加載]，尋找每一個環節，這是一個標籤ul的孩子。附加每次點擊該鏈接時運行的功能。點擊鏈接後，隱藏.pane div中的所有標籤。然後，使用鏈接的href找到適當的選項卡div並顯示它。

小提琴：http://jsfiddle.net/uFALn/18/

來源

2012-01-03 05:42:14 benesch

由於浮動<li>元素你<ul>元素是零高度。

嘗試增加ul { overflow: auto; }和div.content { clear: both; }你的CSS

來源

2012-01-03 05:40:37

感謝benesch。它也幫助了我。

還可以添加return false以防止跳動到錨點。例如：

$("ul.tabs a").click(function() { 
    $(".pane div").hide(); 
    $($(this).attr("href")).show(); 
    return false; 
});

來源

2013-03-27 16:47:16

如何使只有HTML CSS

回答

相關問題