如何使只有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

回答

相关问题