javascript - 我可以基于 HTML 元素创建操作以使用 javascript 显示和隐藏 div 吗？

Question

新手- 我正在 TinyMCE 所见即所得中构建一个页面，并希望能够在单击链接/按钮时显示和隐藏 div。事物的结构方式似乎我无法将 javascript 添加到 html 部分，因此我正在使用 javascript 识别链接。

从示例中，我能够创建以下代码，当单击任何标有 toggleLink 类的按钮时，它会切换单个 div。有没有一种很好的方法来定位单个元素以显示 1 个 div 并隐藏其余部分？我认为 getElementById 可能正朝着正确的方向前进，但我不确定如何单独应用 eventListeners

var togg = document.getElementsByClassName("toggleLink");
var i;

for (i = 0; i < togg.length; i++) {
  togg[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var openDiv = document.getElementById("myDIV1");
    if (openDiv.style.display === "none"){
      openDiv.style.display = "block";
    } else {
      openDiv.style.display = "none";
    } 
  });
}

.demoLinks {
    background-color: #fff;
    height: 200px; 
    width: 15%; 
    font-size: 14pt; 
    color: #ffffff; 
    background-color: #3156f3; 
    padding: 20px 0px 20px 20px; 
    font-family: 'Lato', sans-serif; 
    float: left; 
    position: sticky; top: 100px;
}

.demoLinks p {
    margin-bottom: 2px; 
    padding-left: 15px; 
    color: #ffffff;
}

.demoLinks p a {
    color: #ffffff;
}

.toggleLink {
    color: #ffffff;
    cursor:pointer;
}


.demoVideos {
    background-color: #fff;
    width: 75%; 
    padding: 0px 0px 20px 20px; 
    font-family: 'Lato', sans-serif; 
    float: right;"
}

<div>
<div class="demoLinks">
<p style="margin-bottom: 8px; color: #ffffff; font-weight: bold;">Products:</p>
<p><a class="toggleLink">This Link</a></p>
<p><a class="toggleLink"> ThatLink</a></p>
</div>
<div class="demoVideos">
<div id="myDIV1" style="display: block;">
<p style="margin-bottom: 0.25em;"><span style="font-family: 'Lato', sans-serif; color: #2b28bc; margin-bottom: 0.5em;"><strong><span style="font-size: 24pt;">Product Demo 1</span></strong></span></p>
<div style="height:585px; width:1034px; background-color:#333333;"></div>
</div>
<div id="myDIV2" style="display: none;">
<p style="margin-bottom: 0.25em;"><span style="font-family: 'Lato', sans-serif; color: #2b28bc; margin-bottom: 0.5em;"><strong><span style="font-size: 24pt;">Product Demo 2</span></strong></span></p>
<div style="height:585px; width:1034px; background-color:#333333;"></div>
</div>
</div>
</div>

感谢您的帮助！

标签： javascripthtmlcss

Answer 1

首先，请原谅我，我对你的标记和 CSS 采取了一些自由，以便我更容易地可视化手头的任务 - 切换可见性。

我建议不要使用元素 id，而是建议一个类，但在这里，我data-linktarget在每个链接上都放了一个，这样你就可以简单地把一个选择器放在那里，并使用一个 id、类或任何你选择的东西，这应该给你的任务一些灵活性。

接下来，我使用了一个hidden类来切换目标的可见性——这可以通过多种方式完成，但我使用它来帮助明确意图。我也切换了“活动”类，但除了设施你已经开始的东西之外没有做任何事情。

我没有使用多个 id 上的一组复杂事件处理程序，而是使用一个类来定位toggleLink该类。

我使代码有点简单，但足以说明它在做什么。

function handleEvent(event) {
  let videos = document.querySelector(".demo-videos");
  let hideMe = videos.querySelectorAll(".demo-thing:not(.hidden)");
  hideMe.forEach(function(el) {
    el.classList.toggle("hidden", true);
    el.classList.toggle("active", false);
  });
  let vSelected = videos.querySelector(this.dataset.linktarget);
  vSelected.classList.toggle("hidden", false);
  vSelected.classList.toggle("active", true);
}

Array.prototype.filter.call(document.getElementsByClassName("toggleLink"), function(testElement) {
  testElement.addEventListener("click", handleEvent);
});

.hidden {
  display: none;
}

.demo-container {
  font-family: 'Lato', sans-serif;
}

.demoLinks {
  height: 200px;
  width: 15%;
  font-size: 14pt;
  background-color: #3156f3;
  padding: 20px 0px 20px 20px;
  float: left;
  position: sticky;
  top: 100px;
  font-weight: bold;
}

.demo-links-title-text {
  font-size: 1.2em;
  color: #FFFF00;
}

.demoLinks .demo-link {
  margin-bottom: 8px;
  font-weight: bold;
  margin-bottom: 2px;
  padding-left: 15px;
}

.toggleLink {
  color: #FFFF88;
  cursor: pointer;
}

.demo-videos {
  background-color: #fff;
  width: 75%;
  padding: 0px 0px 20px 20px;
  float: right;
}

.demo-videos .header-part {
  margin-bottom: 0.25em;
}

.demo-videos .header-part .header-part-text {
  color: #2b28bc;
  margin-bottom: 0.5em;
  font-size: 24pt;
  font-weight: bold;
  /* put back <strong> tags if desired instead */
}

.demo-videos .block-part {
  height: 585px;
  width: 1034px;
  background-color: #333333;
  color: cyan;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="demo-container">
  <div class="demoLinks">
    <p class="demo-links-title-text">Products:</p>
    <p class="demo-link"><a class="toggleLink" data-linktarget="#myDIV1" href="#">This Link</a></p>
    <p class="demo-link"><a class="toggleLink" data-linktarget=".demo-thing:nth-child(2)" href="#">ThatLink</a></p>
    <p class="demo-link"><a class="toggleLink" data-linktarget=".demo-thing:nth-child(3)" href="#">That new Link</a></p>
  </div>
  <div class="demo-videos">
    <div id="myDIV1" class="demo-thing active">
      <p class="header-part"><span class="header-part-text"><span>Product Demo 1</span></span>
      </p>
      <div class="block-part">I am first</div>
    </div>
    <div id="myDIV2" class="demo-thing hidden">
      <p class="header-part"><span class="header-part-text"><span>Product Demo 2</span></span>
      </p>
      <div class="block-part">Happy Day</div>
    </div>
    <div id="another-id" class="demo-thing hidden">
      <p class="header-part"><span class="header-part-text"><span>Product Demo New</span></span>
      </p>
      <div class="block-part">Wonderful news</div>
    </div>
  </div>
</div>