# 39, & # 39 show/hide div&. javascript 를 사용하여

39 m, 웹 사이트에 대한 I& 하고 있는 두 개의 div, 그리고 다른 한 후, I want 로드하기에 숨기십시오 곷떒 사이에서 보기 토글하십시오 div JavaScript 를 사용하면 됩니다.

  • 이것은 내 현재 코드*의

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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>

끝 - &lt 스니핏 >;!

두 번째 기능을 대체할 수 있지만, 첫 번째는 div2 작동하지 않습니다.

Teocci
편집된 질문23일 1월 2019 в 7:46
프로그래밍
javascript html onclick
12일 1월 2014 в 1:12
24 파운드
해결책

표시 방법을 또는 숨기십시오 요소:

39 의 element& 조작할 보여주기 위해, 또는 숨기십시오 요소 스타일 속성. 대부분의 경우, 당신은 아마 그냥 element& 변경하십시오 # 39 의 '표시' 속성:

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

또한 여전히 경우 같은 공간 요소) 를 구성하고 같은 숨길 수 있었을 경우 테이블 cell), element& 변경할 수 있습니다 # 39 의 '가시도로' 속성 사용하십시오.

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

숨기기 수집 요소:

숨기고 싶은 경우, 각 요소의 집합으로 그냥 # 39 의 '표시' 를 반복할 요소 및 변경하십시오 element& '없음':

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

&lt &gt! - -;;

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

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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>

끝 - &lt 스니핏 >;!

보여주는 수집 요소:

대부분의 경우 그냥 '디스플레이를 전환 될 것입니다. 없음 '와' 디스플레이: 블록 '즉, 다음과 같은 집합으로 표시할 때 수 있는 엔티티여야 요소.

필요한 경우 두 번째 인수로 디스플레이 '를 선택적으로 지정할 수 있습니다', '블록' t want it don& # 39 는 기본적으로.

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

&lt &gt! - -;;

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

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

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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" />

끝 - &lt 스니핏 >;!

더 나은 방법을 사용할 수 있는 요소 (s) 또는 단순히 보여주는 디스플레이 '스타일' 을 위해 인라인 분리하십시오 약간만이라도 초기 상태로 되돌릴. '스타일' 디스플레이 요소의 계산됩니까 확인 후 알아내기 위해 모두인지 규칙이에요 계층화할 의해 기술입니까 숨겨짐 그렇다면 볼 수 있는 요소.

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

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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>

끝 - &lt 스니핏 >;!

(If you want to 받으라니깐 한 단계 더 너회가 수도 있습니다 한다 어떤 jQuery 가 결정하고 element& # 39 의 기본 브라우저를 스타일 추가하여 요소를 비워둡니다 'iframe' (충돌 없이 스타일시트가) 한 후 계산됩니까 읽어들입니다 스타일. 이렇게 함으로써 알 수 있습니다 진정한 초기 '표시' 속성 값을 요소점 진실이며당신이 won& # 39, 원하는 결과를 얻기 위해 값을 하르고데 수 없다.)

전환해 디스플레이:

마찬가지로, 디스플레이 '를' 토글하십시오 싶은 경우, 각 요소와 반복할 수 있는 요소 요소이거나 취합은 단순히 사항결정 모두인지 가시적입니다 확인하여 계산됩니까 재산이잖아 디스플레이 '가치' # 39 의 경우 '표시' 를 '없음' 으로 it& 가시적입니다, 그렇지 않으면 '표시' 스타일, 인라인 분리하십시오 아웃하기로 it& # 39 의 기본 설정 '이 여전히 숨겨짐, 디스플레이', '블록' 지정된 값이거나 코딩된.

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

&lt &gt! - -;;

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

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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; }
Toggle display

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

<div class="target">Toggle the div.</div>

끝 - &lt 스니핏 >;!

Josh Crozier
편집된 답변4일 11월 2015 в 6:49
해설 (0)

JQuery 자바스크립트 프레임워크 사용할 수도 있습니다.

Div 숨기기 위해 블록

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

Div 블록이어야 표시하십시오.

$(".divIDClass").show();
Mark Cooper
편집된 답변6일 8월 2015 в 6:12
해설 (5)

단순히 div 에 질문이예요 스타일입니까 조작할 수 있습니다.

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

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>
galath
편집된 답변2일 7월 2015 в 10:20
해설 (1)

Flexlm*용 스타일:


   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }

이벤트 핸들러를 사용하여 JavaScript 가 ',' 에서 온 클릭 = &quot &quot, HTML 의 속성을 낫습니다.

View Portfolio
View Results

<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 5월 도움말에서는 DOM 요소를 쉽게 조작할 수 있습니다!

해설 (1)

내가 찾은 이 일반 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>
해설 (0)

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
   }
rayryeng - Reinstate Monica
편집된 답변28일 1월 2017 в 7:31
해설 (0)

단순한 설정되었습니다 스타일 속성이 ID:

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
해설 (0)
 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
해설 (1)

그래서 저는 최근 UIs 구축 및 일부 부에드제스 사용하여 이 질문에 내가 찾은 것은 좋은 대안이 될 수 있습니다.

숨기지 않고 '대상' 은 첫 번째 코드에 클릭하면 보기입니다 프로파일입니다. '대상' 을 (를) '' div2 컨텐트에서 재정의을 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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">
  {{item.name}}

  <div class="" v-if="shown">: {{selected.desc}}</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>

끝 - &lt 스니핏 >;!

Teocci
편집된 답변23일 1월 2019 в 8:40
해설 (0)

그리고 푸르크리프트 오토메이티드 사용하여 백성을 위하여 할로겐:

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!" ]

39, ll, 검사, you& element&quot &quot 경우, 다음과 같은 항목을 볼

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

하지만 실제로 아무것도 디스플레이 화면에 강타했다.

해설 (0)

  • 39, & # 39 div& 단순한 기능 구현에 필요한 표시하거나 숨깁니다. javascript 를 사용하여 *

<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>
Ashar Zafar
편집된 답변16일 3월 2018 в 9:14
해설 (0)