问

使用JavaScript显示/隐藏'div'

五味子120的马甲发布于 2023-02-04 13:28

java

对于我正在做的网站,我想加载一个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;
}







  div1



  div2





替换div2的第二个函数不起作用,但第一个是.



        
        6 个回答
        
                        
                你可以简单地操纵有问题的div的风格......

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

        
                
                    2023-02-04 13:29  回答
                       扯淡的青春0707
                
            
                        
                如何显示或隐藏元素:

为了显示或隐藏元素,请操作元素的样式属性.在大多数情况下,您可能只想更改元素的display属性:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show


或者,如果你仍然希望元素占用空间(就像你要隐藏表格单元格一样),你可以改为改变元素的visibility属性:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show


隐藏元素集合:

如果要隐藏元素集合,只需遍历每个元素并将元素更改display为none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}




// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));




hide(document.querySelectorAll('.target'));

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

<div class="target">This div will be hidden.</div>

<span class="target">This span will be hidden as well.</span>


                
                    2023-02-04 13:29  回答
                       姿葱
                
            

                        
                您还可以使用jQuery JavaScript框架:

隐藏Div Block

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


显示Div Block

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

        
                
                    2023-02-04 13:29  回答
                       yigoon
                
            
                        
                我发现这个简单的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>

        
                
                    2023-02-04 13:29  回答
                       此人已死689
                
            
                        
                您可以使用Js功能隐藏/显示Div.以下样本

<script>
    function showDivAttid(){

        if(Your Condition) {

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

</script>


HTML  -  

<div  id="attid" >Show/Hide this text</div>

        
                
                    2023-02-04 13:29  回答
                       Angle健少
                
            
                        
                使用风格:

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>


在JavaScript中使用事件处理程序比onclick=""HTML中的属性更好:

<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>

<div class="visible" id="portfolio">
    <span>div1</span>
</div>

<div class"hidden" id="results">
    <span>div2</span>
</div>


JavaScript的:

<script type="text/javascript">

    var portfolioDiv = document.getElementById('portfolio');
    var resultsDiv = document.getElementById('results');

    var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
    var resultsBtn = document.getElementById('RenderResults_Btn');

    portfolioBtn.onclick = function() {
        resultsDiv.setAttribute('class', 'hidden');
        portfolioDiv.setAttribute('class', 'visible');
    };

    resultsBtn.onclick = function() {
        portfolioDiv.setAttribute('class', 'hidden');
        resultsDiv.setAttribute('class', 'visible');
    };

</script>


jQuery可以帮助您轻松操作DOM元素!

        
                
                    2023-02-04 13:29  回答
                       手机用户2602915211
                
            
                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签