时间戳

首页 > 解决方案 > 如何在交换内容时使用锚点？

html - 如何在交换内容时使用锚点？

问题描述

由于@support，我有两个包装器 A 和 B 交换可见性。如果支持 B，则 B 的 div 可见，如果不支持 B，则 A 的 div 可见。

我使用这些包装器来交换 div 内容（相同的图像，但大小不同），现在我面临着将锚点设置为包装器内的元素的问题。A 中的 div 和 B 中的 div 应该共享相同的锚点，但我知道我不应该将相同的 id 两次赋予不同的内容。

我能做些什么？是否有可能使两边的元素共享相同的锚点？还是有其他方法可以解决这个问题？

<style type="text/css">
 

.A {display: block}  
.B {display: hidden}

  
@support (...)

{html {...}
  
.A {display: hidden}  
.B {display: block}

 }


</style>
<body>


<div class="A">  

<div id="anchor-x">
<...>
</div>

<div id="anchor-y">
<...>
</div>

<div id="anchor-y">
<...>
</div>



<div class="B"> 

<div id="anchor-x">
<...>
</div>

<div id="anchor-y">
<...>
</div>

<div id="anchor-z">
<...>
</div>



</body>
</html>

标签： htmlcss

解决方案

解决方案是将您的 id 从容器中取出，并在每个部分中包含子容器：

<div id="anchor-x">
  <div class="A X">  
  ...
  </div>
  <div class="B X">
  ...
  </div>
</div>

<div id="anchor-y">
  <div class="A Y">  
  ...
  </div>
  <div class="B Y">
  ...
  </div>
</div>

<div id="anchor-z">
  <div class="A Z">  
  ...
  </div>
  <div class="B Z">
  ...
  </div>
</div>

您可能还想看看srcset，它将响应问题降低到<img>元素级别。

推荐阅读