使用 JavaScript 显示/隐藏“div”

【问题标题】：Show/hide 'div' using JavaScript使用 JavaScript 显示/隐藏“div”
【发布时间】：2014-01-30 22:45:23
【问题描述】：

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

【问题讨论】：

标签： javascript html onclick innerhtml


【解决方案1】：

如何显示或隐藏元素：

要显示或隐藏元素，请操作元素的style property。在大多数情况下，您可能只想更改元素的display property：

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

或者，如果您仍然希望元素占据空间（例如，如果您要隐藏表格单元格），则可以改为更改元素的 visibility property：

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 之间切换，这意味着在显示元素集合时，以下可能就足够了。

如果您不希望将所需的display 默认为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>

【讨论】：

  • eres la piola。格拉西亚斯
【解决方案2】：

您也可以使用jQuery JavaScript 框架：

隐藏 div 块

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

显示 div 块

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

【讨论】：

  • 问题没有提到使用jQuery
  • 这不是投反对票的理由。这个问题并没有具体说不要使用jquery，而且除了其他人来这里查看答案可能没有与OP相同的限制。
  • @KinjalDixit 如果 IMRUP 想要添加一个注释，说明他的答案不使用 vanilla JS 而是依赖于 jQuery，那么即使原始问题没有标记为 jQuery，它也会有一些优点/甚至提到了 jQuery。就目前而言，它是一个使用库的答案，而没有提及它这样做，很少（尽管可能是所有必要的）解释，并且混淆了选择器的使用（在声明 ID 的同时使用类选择器？）。就目前的情况而言，我认为这对这个问题没有用处。
  • 添加 jQuery 示例时（恕我直言，这是完全有效的方法），请同时提供 vanilla JS 示例进行比较并向 OP 解释差异。如今，很多新开发人员认为 jQuery 是 JavaScript。一点启发将帮助他们做出正确的选择。
  • 我认为这个答案非常有用，并且与问题有关。
【解决方案3】：

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

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

【讨论】：

  • 但我希望它也能显示第二个 div 的内容
【解决方案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>

【讨论】：

  • 如果您想使用类名而不是 Id，请使用 document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';跨度>
【解决方案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 元素！

【讨论】：

【解决方案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>

【讨论】：

    【解决方案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
   }

    【讨论】：

      【解决方案8】：

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

      【讨论】：

      • 'to hide' & 'to display' cmets 需要切换。
      【解决方案9】： 
      <script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>

      【讨论】：

      • 对这样的问题使用 Hidden 可能不是一个好主意 - 以及在 11 之前的 IE 版本中不受支持，发帖人实际上是在尝试做一些相当于简单选项卡界面的事情，所以元素不会在所有上下文中隐藏。在这种情况下，最好使用“显示”来控制隐藏 - 参见stackoverflow.com/questions/6708247/…
      【解决方案10】：

      使用Button 向上滚动的简单示例。仅当javascript 处于活动状态时才会滚动，即event 正在监听scroll type。

      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>

      Live in action here

      【讨论】：

        【解决方案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>

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

        【讨论】：

          【解决方案12】：

          只是简单的函数需要使用 JavaScript 实现 Show/hide '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>

          【讨论】：

            【解决方案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>

            【讨论】：

              【解决方案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>

              【讨论】：

                【解决方案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>

                【讨论】：

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多
                  热门标签
                  Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode