在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。

如果我想要在单击时打开完全相同的div，我应该如何在JavaScript中实现？供您参考，css页面位于这里。

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

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

}); 

无法正常工作。我在这里做错了什么？

- the_darkside

---

你想滚动到 step-4 吗？还是一开始就不可见？ - FrontTheMachine

您没有具有id“otherButton”的元素。 - Rajesh

我确实说了“猜测”。无论如何，你的问题必须在问题中包含完整的内容，而不仅仅是链接。链接会失效，使问题及其答案对未来的人毫无用处，人们不应该离开网站来帮助你。在问题中放置一个[mcve]，最好使用Stack Snippets（<>工具栏按钮）使其可运行（这里是如何做到的）。更多信息：如何提出一个好问题？ - T.J. Crowder

请说明当运行代码片段时我们应该做什么/看到什么。我只得到了一个“触发”按钮，当我点击它时，会出现一个 [X] 按钮。这是我要看到的吗？另外：再次强调：问题中必须有样式。那些样式不在问题中，它们仍然只是链接。 - T.J. Crowder

@T.J.Crowder，我们应该做什么 看起来需要通过编程方式触发:target伪类。 - Kaiido

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>

- Kaiido

Answer 2

问题不在于显示为 none 或者可见性设置为隐藏。问题在于 div 元素有一个叫做 'offcanvas-left' 的类，它将其翻译到画布之外 (而画布的溢出设置为隐藏)。如果您想要信号来指示 div 进入视图，则可以将其向右平移或者简单地删除类 'offcanvas-left'。

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>

- Stephen Agwu

Answer 3

如果你想要访问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>

- Nikola Lukic