使用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的第二个函数没有工作，但第一个函数可以。

当前回答

你可以隐藏/显示Div使用Js函数。下面的示例

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML—

<div  id="attid" style="display:none;">Show/Hide this text</div>

2015-02-26 12:43:41

其他回答

将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

设置ID的样式属性:

显示隐藏的div

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to display

隐藏所显示的div

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to hide

2018-08-10 04:04:54

<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>

2014-12-05 05:29:29

你也可以使用jQuery JavaScript框架:

隐藏Div块

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

显示Div块

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

2015-01-06 11:09:30

使用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显示/隐藏'div'

推荐文章

最新文章

标签