blocks|key|2973647|text|您可以简单地操作有问题的div的样式...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2973648|document.getElementById('target').style.display+=+'none';|code-block|syntax|javascript|2973649|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can simply manipulate the style of the div in question...</p>

<pre><code>document.getElementById('target').style.display = 'none';
</code></pre>


blocks|key|163505|text|如何显示或隐藏元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163506|为了显示或隐藏元素，操作元素的style+property。在大多数情况下，您可能只想更改元素的display+property|offset|length|style|CODE|163507|element.style.display+=+'none';+++++++++++//+Hide
element.style.display+=+'block';++++++++++//+Show
element.style.display+=+'inline';+++++++++//+Show
element.style.display+=+'inline-block';+++//+Show|code-block|syntax|javascript|163508|或者，如果您仍然希望元素占用空间(例如，如果您要隐藏表单元格)，则可以改为更改元素的visibility+property：|163509|element.style.visibility+=+'hidden';++++++//+Hide
element.style.visibility+=+'visible';+++++//+Show|163510|隐藏元素集合：|163511|如果要隐藏元素集合，只需迭代每个元素并将元素的display更改为none|163512|function+hide+(elements)+{
++elements+=+elements.length+?+elements+:+[elements];
++for+(var+index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++elements[index].style.display+=+'none';
++}
}|163513|//+Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));|163514|​|163515|hide(document.querySelectorAll('.target'));

function+hide+(elements)+{
++elements+=+elements.length+?+elements+:+[elements];
++for+(var+index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++elements[index].style.display+=+'none';
++}
}|163516|<div+class="target">This+div+will+be+hidden.</div>

<span+class="target">This+span+will+be+hidden+as+well.</span>|163517|163518|显示元素的集合：|163519|大多数情况下，您可能只是在display:+none和display:+block之间切换，这意味着在显示元素集合时，以下内容可能就足够了。|163520|如果不希望缺省为block，可以选择将所需的display指定为第二个参数。|163521|function+show+(elements,+specifiedDisplay)+{
++elements+=+elements.length+?+elements+:+[elements];
++for+(var+index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++elements[index].style.display+=+specifiedDisplay+%7C%7C+'block';
++}
}|163522|//+Usage:
var+elements+=+document.querySelectorAll('.target');
show(elements);

show(elements,+'inline-block');+//+The+second+param+allows+you+to+specify+a+display+value|163523|163524|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%2B%2B)+{
++++elements[index].style.display+=+specifiedDisplay+%7C%7C+'block';
++}
}|163525|<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"+/>|163526|163527|或者，显示元素的一种更好的方法是只删除内联display样式，以便将其恢复到初始状态。然后检查元素的computed+display样式，以确定它是否被级联规则隐藏。如果是，则显示该元素。|163528|function+show+(elements,+specifiedDisplay)+{
++var+computedDisplay,+element,+index;

++elements+=+elements.length+?+elements+:+[elements];
++for+(index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++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+%7C%7C+'block';
++++}
++}
}|163529|163530|show(document.querySelectorAll('.target'));

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

++elements+=+elements.length+?+elements+:+[elements];
++for+(index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++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+%7C%7C+'block';
++++}
++}
}|163531|<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>|163532|163533|(如果您想更进一步，甚至可以模仿jQuery的功能，通过将元素附加到空白iframe+(没有冲突的样式表)来确定元素的默认浏览器样式，然后检索计算出的样式。这样，您就可以知道元素的真实初始display属性值，并且不必为了获得期望的结果而硬编码值。)|163534|切换显示：|163535|类似地，如果您想要切换元素或元素集合的display，您可以简单地迭代每个元素，并通过检查display属性的计算值来确定它是否可见。如果它可见，将display设置为none，否则删除内联display样式，如果它仍然隐藏，则将display设置为指定值或硬编码的默认值block。|163536|function+toggle+(elements,+specifiedDisplay)+{
++var+element,+index;

++elements+=+elements.length+?+elements+:+[elements];
++for+(index+=+0;+index+<+elements.length;+index%2B%2B)+{
++++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+%7C%7C+'block';
++++++}
++++}+else+{
++++++element.style.display+=+'none';
++++}
++}
++function+isElementHidden+(element)+{
++++return+window.getComputedStyle(element,+null).getPropertyValue('display')+===+'none';
++}
}|163537|//+Usage:
document.getElementById('toggle-button').addEventListener('click',+function+()+{
++toggle(document.querySelectorAll('.target'));
});|163538|163539|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%2B%2B)+{
++++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+%7C%7C+'block';
++++++}
++++}+else+{
++++++element.style.display+=+'none';
++++}
++}
++function+isElementHidden+(element)+{
++++return+window.getComputedStyle(element,+null).getPropertyValue('display')+===+'none';
++}
}|163540|.target+{+display:+none;+}|163541|<button+id="toggle-button">Toggle+display</button>

<span+class="target">Toggle+the+span.</span>

<div+class="target">Toggle+the+div.</div>|163542|163543|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style|1|https://developer.mozilla.org/en-US/docs/Web/CSS/display|2|https://developer.mozilla.org/en-US/docs/Web/CSS/visibility^0|0|1C|7|F|E|0|1C|G|1|0|0|16|A|16|J|2|0|0|0|N|7|X|4|0|0|0|0|0|0|0|0|D|D|R|E|0|8|5|M|7|0|0|0|0|0|0|0|L|7|1N|7|0|0|0|0|0|0|10|6|2M|7|0|0|J|7|19|7|22|7|2C|4|2N|7|37|7|3S|5|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2Q|8|@$D|2R|E|2S|F|G]]|9|@$D|2T|E|2U|1|2V]|$D|2W|E|2X|1|2Y]]|A|$]]|$1|H|3|I|5|J|7|2Z|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|30|8|@$D|31|E|32|F|G]]|9|@$D|33|E|34|1|35]]|A|$]]|$1|O|3|P|5|J|7|36|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|37|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|38|8|@$D|39|E|3A|F|G]|$D|3B|E|3C|F|G]]|9|@]|A|$]]|$1|U|3|V|5|J|7|3D|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|J|7|3E|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|3F|8|@]|9|@]|A|$]]|$1|10|3|11|5|J|7|3G|8|@]|9|@]|A|$K|L]]|$1|12|3|13|5|J|7|3H|8|@]|9|@]|A|$K|L]]|$1|14|3|Z|5|6|7|3I|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|3J|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|3K|8|@$D|3L|E|3M|F|G]|$D|3N|E|3O|F|G]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|3P|8|@$D|3Q|E|3R|F|G]|$D|3S|E|3T|F|G]]|9|@]|A|$]]|$1|1B|3|1C|5|J|7|3U|8|@]|9|@]|A|$K|L]]|$1|1D|3|1E|5|J|7|3V|8|@]|9|@]|A|$K|L]]|$1|1F|3|Z|5|6|7|3W|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|J|7|3X|8|@]|9|@]|A|$K|L]]|$1|1I|3|1J|5|J|7|3Y|8|@]|9|@]|A|$K|L]]|$1|1K|3|Z|5|6|7|3Z|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|40|8|@$D|41|E|42|F|G]|$D|43|E|44|F|G]]|9|@]|A|$]]|$1|1N|3|1O|5|J|7|45|8|@]|9|@]|A|$K|L]]|$1|1P|3|Z|5|6|7|46|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|J|7|47|8|@]|9|@]|A|$K|L]]|$1|1S|3|1T|5|J|7|48|8|@]|9|@]|A|$K|L]]|$1|1U|3|Z|5|6|7|49|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|4A|8|@$D|4B|E|4C|F|G]|$D|4D|E|4E|F|G]]|9|@]|A|$]]|$1|1X|3|1Y|5|6|7|4F|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|6|7|4G|8|@$D|4H|E|4I|F|G]|$D|4J|E|4K|F|G]|$D|4L|E|4M|F|G]|$D|4N|E|4O|F|G]|$D|4P|E|4Q|F|G]|$D|4R|E|4S|F|G]|$D|4T|E|4U|F|G]]|9|@]|A|$]]|$1|21|3|22|5|J|7|4V|8|@]|9|@]|A|$K|L]]|$1|23|3|24|5|J|7|4W|8|@]|9|@]|A|$K|L]]|$1|25|3|Z|5|6|7|4X|8|@]|9|@]|A|$]]|$1|26|3|27|5|J|7|4Y|8|@]|9|@]|A|$K|L]]|$1|28|3|29|5|J|7|4Z|8|@]|9|@]|A|$K|L]]|$1|2A|3|2B|5|J|7|50|8|@]|9|@]|A|$K|L]]|$1|2C|3|Z|5|6|7|51|8|@]|9|@]|A|$]]|$1|2D|3|-4|5|6|7|52|8|@]|9|@]|A|$]]]|2E|$2F|$5|2G|2H|2I|A|$2J|2K]]|2L|$5|2G|2H|2I|A|$2J|2M]]|2N|$5|2G|2H|2I|A|$2J|2O]]]]

<h3>How to show or hide an element:</h3>

<p>In order to show or hide an element, manipulate the element's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">style property</a>. In most cases, you probably just want to change the element's <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a>:</p>

<pre><code>element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show
</code></pre>

<p>Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/visibility"><code>visibility</code> property</a> instead:</p>

<pre><code>element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show
</code></pre>

<h3>Hiding a collection of elements:</h3>

<p>If you want to hide a collection of elements, just iterate over each element and change the element's <code>display</code> to <code>none</code>:</p>

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



<pre><code>// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>hide(document.querySelectorAll('.target'));

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index &lt; elements.length; index++) {
    elements[index].style.display = 'none';
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="target"&gt;This div will be hidden.&lt;/div&gt;

&lt;span class="target"&gt;This span will be hidden as well.&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<h3>Showing a collection of elements:</h3>

<p>Most of the time, you will probably just be toggling between <code>display: none</code> and <code>display: block</code>, which means that the following <em>may</em> be sufficient when showing a collection of elements.</p>

<p>You can optionally specify the desired <code>display</code> as the second argument if you don't want it to default to <code>block</code>.</p>

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



<pre><code>// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

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

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="target" style="display: none"&gt;This hidden div should have a display of 'inline-block' when it is shown.&lt;/div&gt;

&lt;span&gt;Inline span..&lt;/span&gt;

&lt;input id="hidden-input" /&gt;</code></pre>
</div>
</div>
</p>

<p>Alternatively, a better approach for showing the element(s) would be to merely remove the inline <code>display</code> styling in order to revert it back to its initial state. Then check the computed <code>display</code> style of the element in order to determine whether it is being hidden by a cascaded rule. If so, then show the element.</p>

<pre><code>function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index &lt; 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';
    }
  }
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>show(document.querySelectorAll('.target'));

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index &lt; 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';
    }
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="target" style="display: none"&gt;Should revert back to being inline.&lt;/span&gt;

&lt;span class="target" style="display: none"&gt;Inline as well.&lt;/span&gt;

&lt;div class="target" style="display: none"&gt;Should revert back to being block level.&lt;/div&gt;

&lt;span class="target" style="display: none"&gt;Should revert back to being inline.&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>(If you want to take it a step further, you could even mimic what jQuery does and determine the element's default browser styling by appending the element to a blank <code>iframe</code> (without a conflicting stylesheet) and then retrieve the computed styling. In doing so, you will know the true initial <code>display</code> property value of the element and you won't have to hardcode a value in order to get the desired results.)</p>

<h3>Toggling the display:</h3>

<p>Similarly, if you would like to toggle the <code>display</code> of an element or collection of elements, you could simply iterate over each element and determine whether it is visible by checking the computed value of the <code>display</code> property. If it's visible, set the <code>display</code> to <code>none</code>, otherwise remove the inline <code>display</code> styling, and if it's still hidden, set the <code>display</code> to the specified value or the hardcoded default, <code>block</code>.</p>

<pre><code>function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index &lt; 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';
  }
}
</code></pre>



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

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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';
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.target { display: none; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="toggle-button"&gt;Toggle display&lt;/button&gt;

&lt;span class="target"&gt;Toggle the span.&lt;/span&gt;

&lt;div class="target"&gt;Toggle the div.&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|167507|text|使用样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|167508|<style+type="text/css">
+++.hidden+{
++++++++display:+none;
+++{
+++.visible+{
++++++++display:+block;
+++}
</style>|code-block|syntax|javascript|167509|在JavaScript中使用事件处理程序比在HTML中使用onclick=""属性更好：|offset|length|style|CODE|167510|<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>|167511|JavaScript：|167512|<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>|167513|jQuery可以帮助您轻松地操作DOM元素！|167514|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/^0|0|0|T|A|0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1A|8|@]|9|@$I|1B|J|1C|1|1D]]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Using style:</p>

<pre><code>&lt;style type="text/css"&gt;
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
&lt;/style&gt;
</code></pre>

<p>Using an event handler in JavaScript is better than the <code>onclick=""</code> attribute in HTML:</p>

<pre><code>&lt;button id="RenderPortfolio_Btn"&gt;View Portfolio&lt;/button&gt;
&lt;button id="RenderResults_Btn"&gt;View Results&lt;/button&gt;

&lt;div class="visible" id="portfolio"&gt;
    &lt;span&gt;div1&lt;/span&gt;
&lt;/div&gt;

&lt;div class"hidden" id="results"&gt;
    &lt;span&gt;div2&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    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');
    };

&lt;/script&gt;
</code></pre>

<p><a href="http://jquery.com/" rel="noreferrer">jQuery</a> may help you to manipulate DOM elements easy!</p>


blocks|key|2760998|text|我发现这个简单的JavaScript代码非常方便！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2760999|#<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>|code-block|syntax|javascript|2761000|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found this plain JavaScript code very handy!</p>

<pre><code>#&lt;script type="text/javascript"&gt;
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
&lt;/script&gt;
</code></pre>


blocks|key|163576|text|<script+type="text/javascript">
++++function+hide(){
++++++++document.getElementById('id').hidden+=+true;
++++}
++++function+show(){
++++++++document.getElementById('id').hidden+=+false;
++++}
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|163577|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|163579|text|您还可以使用jQuery+JavaScript框架：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|163580|隐藏分割块的步骤|163581|$(".divIDClass").hide();|code-block|syntax|javascript|163582|显示分割块的步骤|163583|$(".divIDClass").show();|163584|entityMap|0|LINK|mutability|MUTABLE|url|https://learn.jquery.com/about-jquery/how-jquery-works/^0|6|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>You can also use the <a href="https://learn.jquery.com/about-jquery/how-jquery-works/">jQuery</a> JavaScript framework:</p>

<p>To Hide Div Block</p>

<pre><code>$(".divIDClass").hide();
</code></pre>

<p>To show Div Block</p>

<pre><code>$(".divIDClass").show();
</code></pre>


blocks|key|167538|text|您可以使用Js函数隐藏/显示Div。示例如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|167539|<script>
++++function+showDivAttid(){

++++++++if(Your+Condition)+{

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

</script>|code-block|syntax|javascript|167540|HTML+-|167541|<div++id="attid"+style="display:none;">Show/Hide+this+text</div>|167542|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can Hide/Show Div using Js function. sample below </p>

<pre><code>&lt;script&gt;
    function showDivAttid(){

        if(Your Condition) {

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

&lt;/script&gt;
</code></pre>

<p>HTML - </p>

<pre><code>&lt;div  id="attid" style="display:none;"&gt;Show/Hide this text&lt;/div&gt;
</code></pre>


blocks|key|2973794|text|将HTML设置为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2973795|<div+id="body"+hidden="">
+<h1>Numbers</h1>
+</div>
+<div+id="body1"+hidden="hidden">
+Body+1
+</div>|code-block|syntax|javascript|2973796|现在将javascript设置为|2973797|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
+++}|2973798|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Set your HTML as</p>

<pre><code>&lt;div id="body" hidden=""&gt;
 &lt;h1&gt;Numbers&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div id="body1" hidden="hidden"&gt;
 Body 1
 &lt;/div&gt;
</code></pre>

<p>And now set the javascript as</p>

<pre><code>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
   }
</code></pre>


blocks|key|2973813|text|对于使用卤素的人来说，Purescript的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2973814|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!"+]|code-block|syntax|javascript|2973815|如果你“检查元素”，你会看到类似这样的东西：|2973816|<div+style="display:+none">Hi+there!</div>|2973817|但是，您的屏幕上实际上不会显示任何内容，正如预期的那样。|2973818|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>And the Purescript answer, for people using Halogen:</p>

<pre><code>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!" ]
</code></pre>

<p>If you "inspect element", you'll see something like:</p>

<pre><code>&lt;div style="display: none"&gt;Hi there!&lt;/div&gt;
</code></pre>

<p>but nothing will actually display on your screen, as expected.</p>


blocks|key|164792|text|只需使用JavaScript实现显示/隐藏'div‘的简单函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|164793|<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>|code-block|syntax|javascript|164794|entityMap^0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>Just Simple Function Need To implement Show/hide 'div' using JavaScript</strong></p>

<pre><code>&lt;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;"&gt;READ MORE&lt;/a&gt;


&lt;div id="states" style="display: block; line-height: 1.6em;"&gt;
 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  
    &lt;a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;"&gt;LESS INFORMATION&lt;/a&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|164844|text|只需简单设置ID的样式属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|164845|显示隐藏的div的步骤|164846|<div+id="xyz"+style="display:none">
+++++...............
</div>
//In+JavaScript

document.getElementById('xyz').style.display+='block';++//+to+display|code-block|syntax|javascript|164847|隐藏显示的div的步骤|164848|<div+id="xyz">
+++++...............
</div>
//In+JavaScript

document.getElementById('xyz').style.display+='none';++//+to+hide|164849|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Just Simple Set the style attribute of ID:</p>
<p>To Show the hidden div</p>
<pre><code>&lt;div id=&quot;xyz&quot; style=&quot;display:none&quot;&gt;
     ...............
&lt;/div&gt;
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to display
</code></pre>
<p>To hide the shown div</p>
<pre><code>&lt;div id=&quot;xyz&quot;&gt;
     ...............
&lt;/div&gt;
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to hide
</code></pre>


blocks|key|164912|text|我发现了这个问题，最近我用Vue.js实现了一些UI，所以这是一个很好的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|164913|首先，当你点击View+Profile时，你的代码并没有隐藏target。您正在使用div2覆盖content+target。|offset|length|style|CODE|164914|​|164915|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+%7C%7C+!item.show)+&&+this.shown+?+true+:+!this.shown;
++++++}
++++++this.shown+=+item.show;
++++++this.selected+=+item;
++++},
++},
});|code-block|syntax|javascript|164916|<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>|164917|164918|entityMap^0|0|U|6|16|4|1K|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|S|$]]

<p>I found this question and recently I was implementing some UIs using Vue.js so this can be a good alternative.</p>

<p>First your code is not hiding <code>target</code> when you click on View Profile. You are overriding the content <code>target</code> with <code>div2</code>. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; this.selected.id === item.id) {
        item.show = item.show &amp;&amp; this.shown ? false : !item.show;
      } else {
        item.show = (this.selected.show || !item.show) &amp;&amp; this.shown ? true : !this.shown;
      }
      this.shown = item.show;
      this.selected = item;
    },
  },
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="multiple"&gt;
  &lt;button type="button" v-for="item in items" v-on:click="showItem(item)"&gt;{{item.name}}&lt;/button&gt;

  &lt;div class="" v-if="shown"&gt;: {{selected.desc}}&lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2761263|text|您可以使用jQuery+.toggle()轻松实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2761264|$("#btnDisplay").click(function()+{
++$("#div1").toggle();
++$("#div2").toggle();
});|code-block|syntax|javascript|2761265|<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>|2761266|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/toggle/^0|C|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>You can easily achieve this with the use of jQuery <a href="https://api.jquery.com/toggle/" rel="nofollow noreferrer">.toggle()</a>.</p>



<pre class="lang-js prettyprint-override"><code>$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="div1"&gt;
  First Div
&lt;/div&gt;
&lt;div id="div2" style="display: none;"&gt;
  Second Div
&lt;/div&gt;
&lt;button id="btnDisplay"&gt;Display&lt;/button&gt;
</code></pre>




blocks|key|2761275|text|相反，您的两个函数都使用具有以下主体的toggle函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2761276|this[target].parentNode.style.display+=+'none'
this[source].parentNode.style.display+=+'block'|code-block|syntax|javascript|2761277|​|2761278|function+toggle(target,+source)+{
++this[target].parentNode.style.display+=+'none'
++this[source].parentNode.style.display+=+'block'
}|2761279|<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>|2761280|2761281|entityMap^0|J|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|Q|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>Instead your both functions use <code>toggle</code> function with following body</p>
<pre><code>this[target].parentNode.style.display = 'none'
this[source].parentNode.style.display = 'block'
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle(target, source) {
  this[target].parentNode.style.display = 'none'
  this[source].parentNode.style.display = 'block'
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onClick="toggle('target', 'replace_target')"&gt;View Portfolio&lt;/button&gt;
&lt;button onClick="toggle('replace_target', 'target')"&gt;View Results&lt;/button&gt;

&lt;div&gt;
  &lt;span id="target"&gt;div1&lt;/span&gt;
&lt;/div&gt;

&lt;div style="display:none"&gt;
  &lt;span id="replace_target"&gt;div2&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2761330|text|一个简单的例子，用一个Button来向上滚动。只有当javascript处于活动状态时，它才会滚动，这是一个侦听scroll+type的event。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2761331|​|2761332|document.getElementById('btn').style.display='none'

window.addEventListener('scroll',+(event)+=>+{
++++console.log(scrollY)
++++document.getElementById('btn').style.display='inline'
})|code-block|syntax|javascript|2761333|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>|2761334|2761335|Live+in+action+here|2761336|entityMap|0|LINK|mutability|MUTABLE|url|https://tik9.github.io/^0|B|6|Q|A|1K|B|1W|5|0|0|0|0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|R|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>A simple example with a <code>Button</code> to scroll up. It will only scroll if the <code>javascript</code> is active, which is an <code>event</code> listening to the <code>scroll type</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('btn').style.display='none'

window.addEventListener('scroll', (event) =&gt; {
    console.log(scrollY)
    document.getElementById('btn').style.display='inline'
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>a
long&lt;br&gt;
text&lt;br&gt;
comes&lt;br&gt;
long&lt;br&gt;
text&lt;br&gt;
again

&lt;button id=btn class = 'btn btn-primary' onclick='window.scrollTo({top: 0, behavior: "smooth"});'&gt;Scroll to Top&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://tik9.github.io" rel="nofollow noreferrer">Live in action here</a></p>


<p>For a website I'm doing, I want to load one div, and hide another, then have two buttons that will toggle views between the div using JavaScript.</p>

<p><strong>This is my current code</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;button onClick="replaceContentInContainer('target', 'replace_target')"&gt;View Portfolio&lt;/button&gt;
&lt;button onClick="replaceContentInOtherContainer('replace_target', 'target')"&gt;View Results&lt;/button&gt;

&lt;div&gt;
  &lt;span id="target"&gt;div1&lt;/span&gt;
&lt;/div&gt;

&lt;div style="display:none"&gt;
  &lt;span id="replace_target"&gt;div2&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The second function that replaces div2 is not working, but the first one is.</p>


Show/hide 'div' using JavaScript

jQuery

对于我正在做的一个网站，我想加载一个div，然后隐藏另一个，然后有两个按钮，可以使用JavaScript在div之间切换视图。这是我当前的代码​function replaceContentInContainer(target, source) {  document.getElementById(target).in...

问使用JavaScript显示/隐藏'div‘
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript显示/隐藏'div‘EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript显示/隐藏'div‘
EN