使用 JavaScript 显示/隐藏“div”

Question

对于我正在做的网站，我想加载一个 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 的第二个函数不起作用，但第一个函数起作用。

Answer 1

如何显示或隐藏元素：

为了显示或隐藏元素，操作元素的样式属性。 在大多数情况下，您可能只想更改元素的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>

显示元素集合：

大多数情况下，您可能只是在display: none和display: block之间切换，这意味着在显示元素集合时以下内容可能就足够了。

如果您不希望它默认为block您可以选择将所需的display指定为第二个参数。

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

show(elements, 'inline-block'); // The second param allows you to specify a display value

 var elements = document.querySelectorAll('.target'); show(elements, 'inline-block'); // The second param allows you to specify a display value show(document.getElementById('hidden-input')); function show (elements, specifiedDisplay) { elements = elements.length ? elements : [elements]; for (var index = 0; index < elements.length; index++) { elements[index].style.display = specifiedDisplay || 'block'; } }

 <div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div> <span>Inline span..</span> <input id="hidden-input" />

或者，显示元素的更好方法是仅删除内联display样式，以便将其恢复到其初始状态。 然后检查元素的计算display样式，以确定它是否被级联规则隐藏。 如果是，则显示该元素。

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}

 show(document.querySelectorAll('.target')); function show (elements, specifiedDisplay) { var computedDisplay, element, index; elements = elements.length ? elements : [elements]; for (index = 0; index < elements.length; index++) { element = elements[index]; // Remove the element's inline display styling element.style.display = ''; computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display'); if (computedDisplay === 'none') { element.style.display = specifiedDisplay || 'block'; } } }

 <span class="target" style="display: none">Should revert back to being inline.</span> <span class="target" style="display: none">Inline as well.</span> <div class="target" style="display: none">Should revert back to being block level.</div> <span class="target" style="display: none">Should revert back to being inline.</span>

（如果你想更进一步，你甚至可以模仿 jQuery 所做的，并通过将元素附加到一个空白iframe （没有冲突的样式表）来确定元素的默认浏览器样式，然后检索计算出的样式。这样做，您将知道元素的真实初始display属性值，并且您不必对值进行硬编码以获得所需的结果。）

切换显示：

类似地，如果您想切换元素或元素集合的display ，您可以简单地遍历每个元素并通过检查display属性的计算值来确定它是否可见。 如果可见，则将display设置为none ，否则删除内联display样式，如果它仍然隐藏，则将display设置为指定值或硬编码默认值block 。

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}

// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
  toggle(document.querySelectorAll('.target'));
});

 document.getElementById('toggle-button').addEventListener('click', function () { toggle(document.querySelectorAll('.target')); }); function toggle (elements, specifiedDisplay) { var element, index; elements = elements.length ? elements : [elements]; for (index = 0; index < elements.length; index++) { element = elements[index]; if (isElementHidden(element)) { element.style.display = ''; // If the element is still hidden after removing the inline display if (isElementHidden(element)) { element.style.display = specifiedDisplay || 'block'; } } else { element.style.display = 'none'; } } function isElementHidden (element) { return window.getComputedStyle(element, null).getPropertyValue('display') === 'none'; } }

 .target { display: none; }

 <button id="toggle-button">Toggle display</button> <span class="target">Toggle the span.</span> <div class="target">Toggle the div.</div>

Answer 2

您还可以使用jQuery JavaScript 框架：

隐藏 Div 块

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

显示 Div 块

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

Answer 3

您可以简单地操纵有问题的 div 的样式...

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

Answer 4

您可以使用 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" style="display:none;">Show/Hide this text</div>

Answer 5

使用风格：

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

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

<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 元素！

Answer 6

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

Answer 7

将您的 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
   }

Answer 8

简单设置ID的style属性：

显示隐藏的div

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

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

隐藏显示的 div

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

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

Answer 9

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

Answer 10

一个带有向上滚动Button简单示例。 它只会在javascript处于活动状态时滚动，这是一个侦听scroll type的event 。

 document.getElementById('btn').style.display='none' window.addEventListener('scroll', (event) => { console.log(scrollY) document.getElementById('btn').style.display='inline' })

 a long<br> text<br> comes<br> long<br> text<br> again <button id=btn class = 'btn btn-primary' onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>

生活在这里

Answer 11

对于使用卤素的人来说，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!" ]

如果您“检查元素”，您会看到如下内容：

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

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

Answer 12

只是简单的函数需要使用 JavaScript 实现显示/隐藏“div”

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>

Answer 13

我发现了这个问题，最近我正在使用 Vue.js 实现一些 UI，所以这可能是一个不错的选择。

首先，当您单击查看配置文件时，您的代码不会隐藏target 。 您正在使用div2覆盖内容target 。

 let multiple = new Vue({ el: "#multiple", data: { items: [{ id: 0, name: 'View Profile', desc: 'Show profile', show: false, }, { id: 1, name: 'View Results', desc: 'Show results', show: false, }, ], selected: '', shown: false, }, methods: { showItem: function(item) { if (this.selected && this.selected.id === item.id) { item.show = item.show && this.shown ? false : !item.show; } else { item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown; } this.shown = item.show; this.selected = item; }, }, });

 <div id="multiple"> <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button> <div class="" v-if="shown">: {{selected.desc}}</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>

Answer 14

您可以使用 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>

Answer 15

相反，您的两个功能都使用带有以下正文的toggle功能

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

 function toggle(target, source) { this[target].parentNode.style.display = 'none' this[source].parentNode.style.display = 'block' }

 <button onClick="toggle('target', 'replace_target')">View Portfolio</button> <button onClick="toggle('replace_target', 'target')">View Results</button> <div> <span id="target">div1</span> </div> <div style="display:none"> <span id="replace_target">div2</span> </div>

使用 JavaScript 显示/隐藏“div”

问题描述

15 个解决方案

解决方案1
471 已采纳 2014-01-12 01:33:41

如何显示或隐藏元素：

隐藏元素集合：

显示元素集合：

切换显示：

解决方案2
103 2015-01-06 11:09:30

解决方案3
47 2014-01-12 01:20:47

解决方案4
23 2015-02-26 12:43:41

解决方案5
14 2014-01-12 01:54:09

解决方案6
13 2014-05-26 13:03:24

解决方案7
5 2017-01-28 07:13:05

解决方案8
2 2018-08-10 04:04:54

解决方案9
1 2014-12-05 05:29:29

解决方案10
1 2021-02-05 19:43:06

解决方案11
0 2018-02-10 17:40:23

解决方案12
0 2018-03-13 05:16:09

解决方案13
0 2019-01-23 06:22:49

解决方案14
0 2020-06-04 19:34:49

解决方案15
0 2020-07-27 13:39:25

使用 JavaScript 显示/隐藏“div”

问题描述

15 个解决方案

解决方案1 471 已采纳 2014-01-12 01:33:41

如何显示或隐藏元素：

隐藏元素集合：

显示元素集合：

切换显示：

解决方案2 103 2015-01-06 11:09:30

解决方案3 47 2014-01-12 01:20:47

解决方案4 23 2015-02-26 12:43:41

解决方案5 14 2014-01-12 01:54:09

解决方案6 13 2014-05-26 13:03:24

解决方案7 5 2017-01-28 07:13:05

解决方案8 2 2018-08-10 04:04:54

解决方案9 1 2014-12-05 05:29:29

解决方案10 1 2021-02-05 19:43:06

解决方案11 0 2018-02-10 17:40:23

解决方案12 0 2018-03-13 05:16:09

解决方案13 0 2019-01-23 06:22:49

解决方案14 0 2020-06-04 19:34:49

解决方案15 0 2020-07-27 13:39:25

解决方案1
471 已采纳 2014-01-12 01:33:41

解决方案2
103 2015-01-06 11:09:30

解决方案3
47 2014-01-12 01:20:47

解决方案4
23 2015-02-26 12:43:41

解决方案5
14 2014-01-12 01:54:09

解决方案6
13 2014-05-26 13:03:24

解决方案7
5 2017-01-28 07:13:05

解决方案8
2 2018-08-10 04:04:54

解决方案9
1 2014-12-05 05:29:29

解决方案10
1 2021-02-05 19:43:06

解决方案11
0 2018-02-10 17:40:23

解决方案12
0 2018-03-13 05:16:09

解决方案13
0 2019-01-23 06:22:49

解决方案14
0 2020-06-04 19:34:49

解决方案15
0 2020-07-27 13:39:25