Question

我很好奇是否可以仅使用css实现简单的div交换，如果div没有固定的高度。我已经广泛搜索了一个答案，并就这个问题提出了一些实质性的讨论。

这个想法是将一个扩展的啤酒列表分成四个独立的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>

注意：请务必将脚本放在适当的位置（通常在元素中）。

CSS DIV交换没有固定高度？

1 个答案: