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

当前回答

<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

<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

对于使用卤素的人，Purescript给出的答案是:

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS

render state = 
  HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

如果你“inspect element”，你会看到如下内容:

<div style="display: none">Hi there!</div>

但正如预期的那样，屏幕上将不会显示任何内容。

2018-02-10 17:40:23

你可以隐藏/显示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

我发现这个简单的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

使用JavaScript显示/隐藏'div'

推荐文章

最新文章

标签