html - 没有固定高度的 CSS DIV 交换？

Question

我很好奇如果 div 没有固定高度，是否有可能仅使用 css 实现简单的 div 交换。我进行了广泛的搜索以寻找答案，但几乎没有就此事进行深入的讨论。

这个想法是将一个扩展的啤酒列表分成四个独立的 div，并且一次只显示其中一个。单击相应的 anchor 时，显示的 div 会切换，同时隐藏其他三个。第一个 div 应该在页面加载时显示。我对此有一些经验并取得了成功，但只有固定大小，因为最重要的 div 会隐藏它后面的所有其他 div。

这些特定的 div 将包含格式化的表格和无序列表。我不确定这是否会产生任何影响，但我认为值得一提以防万一。 div 不能有固定的高度，因为每个 div 中的元素数会有所不同。我还没有对它进行编码，因为我不确定它是否值得投入时间，但 HTML 看起来像这样:

<div id="secondaryNav">      
  <ul>
    <li>Link to div1</li>
    <li>Link to div2</li>
    <li>Link to div3</li>
    <li>Link to div4</li>
  </ul>
</div>

<div id="swappedContent">
  <div id="1">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="2">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="3">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="4">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
</div><!--swappedContent-->

我找到了一个例子，我正在为这个布局建模(使用 javascript)，但我不确定链接到我在这里不拥有的网站是否合适。如果为了清楚起见我应该链接到它，请告诉我。

Answer 1

尝试使用 CSS“显示”。在每个 div 中做:

<div id="myDiv" style="display:none;">

然后当你想显示 div 时，在 JavaScript 中执行以下操作:

document.getElementById("myDiv").style.display = "block";

所以最后，你会得到类似的东西:

<div id="secondaryNav">      
    <a href="javascript:void(0)" onclick="showDiv('1')">Link to div1</a>
    <a href="javascript:void(0)" onclick="showDiv('2')">Link to div2</a>
    <a href="javascript:void(0)" onclick="showDiv('3')">Link to div3</a>
    <a href="javascript:void(0)" onclick="showDiv('4')">Link to div4</a>
</div>

<div id="swappedContent">
  <div id="1">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="2" style="display:none;">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="3" style="display:none;">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
  <div id="4" style="display:none;">
    <table>
      <tr>content</tr> x 40-50
    </table>
  </div>
</div>

<script type="text/javascript">
function showDiv(divId) {
    for (i = 1; i <= 4; i++) {
        document.getElementById(i).style.display = "none";
    }

    document.getElementById(divId).style.display = "block";
}
</script>

注意:一定要将脚本放在合适的位置(通常在元素中)。