使用纯 Javascript 使用锚标记在 div 之间切换答案

【问题标题】：Toggle between to div's using anchor Tag Using Pure Javascript使用纯 Javascript 使用锚标记在 div 之间切换
【发布时间】：2021-05-12 10:42:23
【问题描述】：

#second{
display:none;
}

<div id="first">
<h1>First Div</h1>
<a href="#second">Go to Div2</a>
</div>

<div id="second">
<h1>Second</h1>
<a href="#first">Go to Div1</a>
</div>

最初，当用户点击 Go to Div2 时，Div2 对用户不可见，他应该能够看到 Div2 的内容，当用户点击 Go to Div1 时，他应该能够看到 Div1 的内容，一次只能看到一个 div内容应该是可见的

【问题讨论】：

尝试使用 onClick 事件添加和删除一个类，然后使用 CSS 隐藏它
@Hive7 好的，我会试试的
@MandapatiGanesh，希望对您有所帮助codepen.io/Maniraj_Murugan/pen/JjWGRbm

标签： javascript html css web frontend

【解决方案1】：

function change () {
  let first = document.getElementById('first');
  let second = document.getElementById('second');
  
  if (first.style.display === "none") {
    first.style.display = "block";
    second.style.display = "none";
  } else {
    second.style.display = "block";
    first.style.display = "none";
  }
}

#second {
  display: none;
}

<div id="first">
<h1>First Div</h1>
<a href="#second" onclick="change()">Go to Div2</a>
</div>

<div id="second">
<h1>Second</h1>
<a href="#first" onclick="change()">Go to Div1</a>
</div>

【讨论】：

【解决方案2】：

假设你有一些 index.js 或其他：

const divToggle = document.querySelectorAll(".div-toggle");

divToggle.forEach((element) => {
  let target = element.dataset.target;
  let targetElement = document.querySelector(`#${target}`);
  element.onclick = () => {
    if (targetElement) {
      targetElement.classList.add("visible");
      element.parentElement.classList.remove("visible");
    }
  };
});

在你的 css 中，你会有这样的东西：


.div-collapsible {
  display: none;
}

.div-collapsible.visible {
  display: block;
}

最后是 html：

<div id="first-div" class="div-collapsible visible">
   <h1>First Div</h1>
   <a class="div-toggle" href="#second" data-target="second-div">Go to Div2</a>
</div>
<div id="second-div" class="div-collapsible">
   <h1>Second</h1>
   <a class="div-toggle" href="#first" data-target="first-div">Go to Div1</a>
</div>

最初，将显示类为 visible 的 div。所有其他可折叠 div 均被隐藏。

【讨论】：

【解决方案3】：

使用提供的 javascript，并将 onClick 属性添加到您的链接。

    #second{
      display:none;
    }

    <div id="first">
      <h1>First Div</h1>
      <a href="javascript:void(0)" onclick="myFunc()">Go to Div2</a>
    </div>

    <div id="second">
      <h1>Second</h1>
      <a href="javascript:void(0)" onclick="myFunc()">Go to Div1</a>
    </div>

function myFunc(){
  var first = document.getElementById("first"),
      second = document.getElementById("second");
  if(first.style.display == "none"){
    first.style.display = "block";
    second.style.display = "none";
  } else {
    first.style.display = "none";
    second.style.display = "block";
  }
  
}

【讨论】：