在javascript中使用#href约定

Question

​

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").style.display = 'block'

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

​

我使用这个例子 (如上文所示)作为我的网页上的html和css的指南。在这个示例中，我们看到单击其href=#step4将用id step-4显示div的按钮。

在javascript中，如果我想在单击时打开这个完全相同的div，我将如何做到这一点？对于您的参考，css页面是这里。

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").style.display = 'block'

}); 

不起作用。我在这里做错什么了？

Answer 1

该示例使用的CSS技巧是查看:target伪类。

单击锚点时，片段标识符设置为页面的散列，然后step-4元素与此选择器匹配，激活transform: translateX(0)规则，这将使元素可见。

所以您想要的实际上是以编程方式触发:target伪类。

这可以通过操作location.hash属性来实现。

​

btn.onclick = e => {
  location.hash = "myDiv";
}

div:target{
  color: red;
}

<div id="myDiv">Hello</div>
<button id="btn">click me</button>

​

或者用你的例子：

​

document.getElementById('otherButton').addEventListener('click', function () {

location.hash = 'step-4';

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

​

Answer 2

问题不是显示为无，也不是可见性设置为隐藏。问题是div有一个名为“off画布-左”的类，它将其从画布上翻译出来(而画布的溢出设置为隐藏)。如果您想要向视图发送div信号，您可以向右翻译它，或者简单地删除类“离开画布-左”。

​

document.getElementById('otherButton').addEventListener('click', function () {

document.getElementById("step-4").classList.remove('offcanvas-left');

}); 

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

​

Answer 3

如果要访问html标记，则需要在html标记中具有类似样式的属性。

下面是一个例子：

​

document.getElementById('otherButton').addEventListener('click', function () {
alert(document.getElementById("step-4").style.display)
document.getElementById("step-4").style.display = 'none';

} , false);

<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>

<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate' style="display:block;">
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>
<div id='otherButton' class='button'>otherButton</div>

​