文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有一种更简短、更简洁的方法来隐藏和显示Javascript的div？

问有没有一种更简短、更简洁的方法来隐藏和显示Javascript的div？
EN

Stack Overflow用户

提问于 2022-06-14 13:07:29

回答 8查看 509关注 0票数 5

我正在创建一个仪表板，大约有20个div，以"display: none;“开头。

当使用侧栏中的.onClick()时，它将显示一个特定的div并隐藏所有其他的div。但是，我使用了为每个div创建函数的经典解决方案，它非常冗长，代码看起来很混乱。

是否有更好的更清洁的方法来实现这一点与Javascript？

这是我的代码：

function presale() {
  var x = document.getElementById("presale");
  var y = document.getElementById("claim");
  var z = document.getElementById("stake");
  if (x.style.display === "grid") {
    x.style.display = "none";
  } else {
    x.style.display = "grid";
    y.style.display = "none";
    z.style.display = "none";
  }
}

function claim() {
  var x = document.getElementById("presale");
  var y = document.getElementById("claim");
  var z = document.getElementById("stake");
  if (y.style.display === "grid") {
    y.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "grid";
    z.style.display = "none";
  }
}

function stake() {
  var x = document.getElementById("presale");
  var y = document.getElementById("claim");
  var z = document.getElementById("stake");
  if (z.style.display === "grid") {
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "grid";
  }
}

*,
html {
  color: #fff;
  background-color: black;
}

#presale,
#claim,
#stake
/* Here I have many other divs like below */

{
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <link rel="stylesheet" href="MOD.CSS">
  <script src="main2.js"></script>
  <title>Base Template</title>
</head>

<body>
  <div>
    <ul>
      <!-- Here I have other 20 options like the above -->
      <li onclick="presale()">Presale</li>
      <li onclick="claim()">Claim</li>
      <li onclick="stake()">Stake</li>
      <!-- Here I have other 20 options like the above -->
    </ul>
    <div id="presale">
      <h1>Presale</h1>
    </div>
    <div id="claim">
      <h1>Claim</h1>
    </div>
    <div id="stake">
      <h1>Stake</h1>
    </div>
  </div>
</body>

</html>

是否有更好的方法来做到这一点而不需要为每个div创建一个函数并一次又一次地重复相同的事情？

javascript

html

jquery

css

回答 8

Stack Overflow用户

回答已采纳

发布于 2022-06-14 14:11:55

根本不需要JS。您可以简单地使用锚点并使用#id作为超引用。然后，可以使用:target-selector通过CSS显示元素：

*,
html {
  color: #fff;
  background-color: black;
}

.d-none
/* Here I have many other divs like below */

{
  display: none;
}

div:target {
  display: grid;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <link rel="stylesheet" href="MOD.CSS">
  <script src="main2.js"></script>
  <title>Base Template</title>
</head>

<body>
  <div>
    <ul>
      <!-- Here I have other 20 options like the above -->
      <li><a href ="#presale">Presale</a></li>
      <li><a href ="#claim">Claim</a></li>
      <li><a href ="#stake">Stake</a></li>
      <!-- Here I have other 20 options like the above -->
    </ul>
    <div id="presale" class="d-none">
      <h1>Presale</h1>
    </div>
    <div id="claim" class="d-none">
      <h1>Claim</h1>
    </div>
    <div id="stake" class="d-none">
      <h1>Stake</h1>
    </div>
  </div>
</body>

</html>

票数 8

Stack Overflow用户

发布于 2022-06-14 13:35:44

在这里，您可以看到一个普通的Javascript解决方案。

默认情况下，content div是隐藏的。

如果单击某个元素，相应的data-id将得到类show。

window.onload = function () {

  document.querySelectorAll('#nav li').forEach((elements) => {
    elements.addEventListener('click', (el) => {
      document.querySelectorAll('.content').forEach((item) => {
        // hide all
        item.classList.remove('show');
      });
      // show one
      document.getElementById(el.target.getAttribute('data-id')).classList.add('show');
    });
  });

};

.content {
  display: none;
}
.show {
  display: block;
}

<ul id="nav">
  <li data-id="presale">Presale</li>
  <li data-id="claim">Claim</li>
  <li data-id="stake">Stake</li>
</ul>
<div id="presale" class="content">
  <h1>Presale</h1>
</div>
<div id="claim" class="content">
  <h1>Claim</h1>
</div>
<div id="stake" class="content">
  <h1>Stake</h1>
</div>

票数 7

Stack Overflow用户

发布于 2022-06-14 13:33:38

像这样使用数据属性和类列表切换也应该有效。

通过使用通用CSS选择器来隐藏/显示各个部分，我会考虑最小化您的代码(和CSS)。这也使得下一个人的可伸缩性和可维护性更容易。

这有一个额外的好处，您的样式被控制100%使用CSS，而不是任意的内联风格设置的javascript。

添加另一个部分也很容易，因为可以：

添加一个带有一些id的新部分(例如。awesome-section)
添加一个带有属性data-toggle-section的nav条目，id作为值<li data-toggle-section="awesome-section">Awesome Section</li>
利润

您还不局限于仅使用nav元素本身，因为事件侦听器使用[data-toggle-section]选择器绑定，这意味着基本上任何东西都可以显示或隐藏一个部分，只要它具有正确的值。

const buttons = Array.from(document.querySelectorAll("[data-toggle-section]"));
const sections = buttons.map(element => {
    return document.getElementById(element.dataset.toggleSection)
});

buttons.forEach(element => {
    element.addEventListener('click', event => {
        const selected = element.dataset.toggleSection;

        sections.forEach(section => {
            if(section.id === selected) {
                section.classList.toggle('shown');
            } else {
                section.classList.remove('shown');
            }
        })
    });
});

*,
html {
    color: #fff;
    background-color: black;
}

.option-section {
    display: none;
}

.option-section.shown {
    display: grid;
}

<div>
    <ul>
        <!-- Here I have other 20 options like the above -->
        <li data-toggle-section="presale">Presale</li>
        <li data-toggle-section="claim">Claim</li>
        <li data-toggle-section="stake">Stake</li>
        <!-- Here I have other 20 options like the above -->
    </ul>
    <div id="presale" class="option-section">
        <h1>Presale</h1>
    </div>
    <div id="claim" class="option-section">
        <h1>Claim</h1>
    </div>
    <div id="stake" class="option-section">
        <h1>Stake</h1>
    </div>
</div>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72617531

复制

相似问题

问有没有一种更简短、更简洁的方法来隐藏和显示Javascript的div？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种更简短、更简洁的方法来隐藏和显示Javascript的div？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种更简短、更简洁的方法来隐藏和显示Javascript的div？
EN