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

其他回答

设置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

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

你可以简单地操纵div的样式…

document.getElementById('target').style.display = 'none';

2014-01-12 01:20:47

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

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

使用JavaScript显示/隐藏'div'

推荐文章

最新文章

标签