使用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

其他回答

使用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代码非常方便!

#<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使用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激活时滚动，这是一个监听滚动类型的事件。

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

相反，你的两个函数使用toggle函数与以下主体

this[target].parentNode.style.display = 'none'
this[source].parentNode.style.display = 'block'

函数切换(目标，源){ 这[目标].parentNode.style。Display = 'none' 这[源].parentNode.style。Display = 'block' ｝ <button onClick="toggle('target'， 'replace_target')">视图组合> < /按钮 <button onClick="toggle('replace_target'， 'target')"> < / >按钮查看结果 < div > < span id = "目标" > div1 < / span > < / div > < div风格= "显示:没有" > < span id = " replace_target " > div2 < / span > < / div >

2020-07-27 13:39:25

使用JavaScript显示/隐藏'div'

推荐文章

最新文章

标签