Javascript 显示/隐藏 div onclick

Question

我有一个包含三个 div 的页面，每个 div 是一个段落。 每当用户从导航栏按下它时，我想使用 javascript 仅在页面中显示每个 div这是导航栏

WebDev 只是一个包含三个不同 div 的页面，如下所示

<!--HTML-->
<div class="html" id="html-show">
    <p class="text-html" id="htmlContent">..
    </p>
</div>

<!--CSS-->
<div class="css" id="css-show">
    <p class="text-css" id="cssContent">..
    </p>
</div>

<!--JS-->
<div class="js" id="js-show">
    <p class="text-js" id="jsContent">..
    </p>
</div>

因此，如果用户在导航栏中按下 HTML，他将被重定向到此页面，并且只有 HTML div 可见，css 和 js 也是如此。 事实上，页面的其他部分将被显示（导航栏、页脚等）

Answer 1

你甚至不需要JS。 您可以使用锚点和:target单独使用 HTML 和 CSS 来完成，如下面的代码片段所示。

 #html-show, #css-show, #js-show { display: none; } #html-show:target, #css-show:target, #js-show:target { display: block; }

 <!--Nav-Bar--> <a href="#html-show">Show HTML</a> <a href="#css-show">Show CSS</a> <a href="#js-show">Show JS</a> <!--HTML--> <div class="html" id="html-show"> <p class="text-html" id="htmlContent">HTML Content.. </p> </div> <!--CSS--> <div class="css" id="css-show"> <p class="text-css" id="cssContent">CSS Content.. </p> </div> <!--JS--> <div class="js" id="js-show"> <p class="text-js" id="jsContent">JS Content.. </p> </div>

Answer 2

 function showHtmlDiv() { var htmlShow = document.getElementById("html-show"); if (htmlShow.style.display === "none") { htmlShow.style.display = "block"; } else { htmlShow.style.display = "none"; } }

 <button onclick="showHtmlDiv()">Click Here</button> <div id="html-show"> <p class="text-html" id="htmlContent">.. </p> </div>

Answer 3

这就是我要做的（更改纯 javascript 中特定元素的 visibiltiy css 属性）。

// You would change the id to the id of the button element (so the links in your navbar)
var button = document.getElementById('button');
// This is the element that you either want to be hidden or shown
var elementToBeToggled = document.getElementById('elementToBeToggled');
// states whether or not the element is visible in this current state.
var elementVisible = "hidden";

// This function will be run when you click the link in the navbar
function toggleElement() {
  // Ternary operation that basically changes elementVisible to its opposite
  elementVisible = elementVisible === "hidden" ? elementVisible = "visible" : elementVisible = "hidden";

  // change element visiblity to elementVisible variable
  elementToBeToggled.style.visiblity = elementVisible;
}

// Run toggle function on button click
button.onclick = toggleElement;

这个解决方案比如果你只是在<button>标签内放置一个onclick事件要灵活得多，因为你只能将onclick事件放在那个单个 html 标签中，如果让我们说切换按钮是一个<a>标签。 设置<a>标签样式以制作导航栏要容易得多，我假设此解决方案对您可行。

Answer 4

我会实施一个 css 方法。 加载页面时，在文档正文中添加一些唯一标识符类，并基于此确定不同部分的可见性。 此外，将查询参数添加到您的链接中。 现在，如果您使用 index.html?show=html 加载页面，则只有 html div 可见。

<html>
  <head>
    <script type="text/javascript">
       //this is just for illustration purposes, use a parser library
       function getParams () {
          return document.location.search.substr(1).split("&").reduce(function (acc, p) {
             const [key, value] = p.split("=");
             if (typeof(value) !== "undefined") {
                 acc[key] = value;
             }
             return acc;
          }, {});
       }

       document.addEventListener("load", function () {
          const params = getParams();
          body.classList.add("show-" + (params.show || "all"));
       });
    </script>
    <style>
      .html, .css, .js {
         display: none;
      }
      body.show-all .html, body.show-all .css, body.show-all .js {
         display: block;
      }
      body.show-html .html {
         display: block;
      }
    </style>
  </head>
  <body>
     ...
  </body>
</html>

Javascript 显示/隐藏 div onclick

问题描述

4 个解决方案

解决方案1
4 已采纳 2020-10-23 00:05:49

解决方案2
0 2020-10-22 17:43:00

解决方案3
0 2020-10-22 17:53:28

解决方案4
0 2020-10-22 17:54:49

Javascript 显示/隐藏 div onclick

问题描述

4 个解决方案

解决方案1 4 已采纳 2020-10-23 00:05:49

解决方案2 0 2020-10-22 17:43:00

解决方案3 0 2020-10-22 17:53:28

解决方案4 0 2020-10-22 17:54:49

解决方案1
4 已采纳 2020-10-23 00:05:49

解决方案2
0 2020-10-22 17:43:00

解决方案3
0 2020-10-22 17:53:28

解决方案4
0 2020-10-22 17:54:49