使用JavaScript显示/隐藏'div'

对于我正在做的网站，我想加载一个div，并隐藏另一个，然后有两个按钮，将使用JavaScript在div之间切换视图。

这是我当前的代码

function replaceContentInContainer(target, source) { document.getElementById(target).innerHTML = document.getElementById(source).innerHTML; } function replaceContentInOtherContainer(replace_target, source) { document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML; } <html> <button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button> <button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button> <div> <span id="target">div1</span> </div> <div style="display:none"> <span id="replace_target">div2</span> </div>

替代div2的第二个函数没有工作，但第一个函数可以。

当前回答

你也可以使用jQuery JavaScript框架:

隐藏Div块

$(".divIDClass").hide();

显示Div块

$(".divIDClass").show();

2015-01-06 11:09:30

其他回答

我发现这个简单的JavaScript代码非常方便!

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>

2014-05-26 13:03:24

只是简单的函数需要实现显示/隐藏'div'使用JavaScript

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>

2018-03-13 05:16:09

使用jQuery .toggle()可以轻松实现这一点。

$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  First Div
</div>
<div id="div2" style="display: none;">
  Second Div
</div>
<button id="btnDisplay">Display</button>

2020-06-04 19:34:49

一个使用按钮向上滚动的简单示例。它只会在javascript激活时滚动，这是一个监听滚动类型的事件。

document.getElementById（'btn'）.style.display='none' window.addEventListener（'scroll'，（event） => { 控制台.log（滚动） document.getElementById（'btn'）.style.display='inline' }) 一个长<br> 发短信<br> 来了<br> 长<br> 发短信<br> 再 <button id=btn class= 'btn btn-primary' onclick='window.scrollTo（{top： 0， behavior： “smooth”}）;'>Scroll to Top</button>

现场直播

2021-02-05 19:43:06

将HTML设置为

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

现在将javascript设置为

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }

2017-01-28 07:13:05

使用JavaScript显示/隐藏'div'

推荐文章

最新文章

标签