Javascript 显示/隐藏 div onclick [英] Javascript show/hide div onclick

问题描述

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

WebDev 只是一个页面，由三个不同的 div 组成，如下所示

<p class="text-html";id="htmlContent">...</p>
<!--CSS-->
<p class="text-css";id=cssContent">...</p>
<!--JS-->
<p class="text-js";id="jsContent">...</p>

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

解决方案

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

#html-show, #css-show, #js-show {显示:无；}#html-show:target, #css-show:target, #js-show:target {显示:块；}

<!--Nav-Bar--><a href="#html-show">显示 HTML</a><a href="#css-show">显示 CSS</a><a href="#js-show">显示JS</a><!--HTML--><div class="html" id="html-show"><p class="text-html" id="htmlContent">HTML 内容..</p>

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

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

I have a page that contains three divs each div is a paragraph. I want to use javascript to show each div only in the page whenever the user presses on it from the navbar This is the navbar

WebDev is only one page that consist of three different divs as shown here

<!--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>

So, if the user presses on HTML in the navbar he will be redirected to this page and only HTML div is visible, same goes for css and js. In fact, other parts of the page will be shown (navbar, footer, etc..)

解决方案

You dont even need JS for it. You can do it solely with HTML and CSS with the use of anchors and :target like in the snippet below.

#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>

这篇关于Javascript 显示/隐藏 div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！