javascript로 요소 숨기기/표시

Question

답변을 검색하려고했지만 아직 올바른 답변을 찾지 못했습니다. 그리고 나는 이것을 javascript와 함께해야합니다. 그래서 제 jQuery 답변을주지 마십시오. 자바 스크립트에서의 나의 기술은 또한 내가 배우기 시작한 이래로 매우 낮다.

이것은 내가해야하는 것입니다. 3 개의 버튼이 있습니다. 각각 하나의 div에 해당하는 콘텐츠가 있습니다 (따라서 3 개의 다른 div가 있습니다). 사이트를 처음로드 할 때 첫 번째 버튼의 콘텐츠 만 표시됩니다. 다른 버튼을 클릭하면이 새로운 버튼의 콘텐츠 만 표시되며 다른 모든 버튼은 사라져야합니다 (물론 3 개의 버튼 제외).

나는 함수 내에서 document.getElementById("button1").style.visibility = "hidden";으로 놀려고했으나, 여전히 그 기능을 html 문서에 연결하려고 할 때 실제로 작동시키지 못한다.

팁이 있습니까?

Answer 1

은 아래에 도움이되기를 바랍니다

<button onclick="javascript:show(1)">One</button> 
<button onclick="javascript:show(2)">Two</button> 
<button onclick="javascript:show(3)">Three</button> 

<div id="content1">content one</div> 
<div id="content2" style="display:none">content two</div> 
<div id="content3" style="display:none">content three</div> 

<script> 
function show(dv){ 
    hideAll(); 
    if(dv == '1'){ 
      document.getElementById("content1").style.display = "block"; 
    }else if(dv == '2'){ 
       document.getElementById("content2").style.display = "block"; 
    }else{ 
     document.getElementById("content3").style.display = "block"; 
    } 
} 

function hideAll(){ 
    document.getElementById("content1").style.display = "none"; 
    document.getElementById("content2").style.display = "none"; 
    document.getElementById("content3").style.display = "none"; 
} 

</script> 

Answer 2

몇 가지 참고 사항 :

• 당신은 클릭 할 때 표시해야하는 사업부 확인할 수 있습니다
• 을 클릭 할 필요가 무엇에 click 이벤트를 감시 할 필요가있다. visibility: hidden 또는
• display: none 그렇지 않으면 등을 클릭 핸들러를 할당하지 않습니다는 HTML 요소가로드 한 후 자바 스크립트가 실행되어 있는지 확인

Answer 3

여기에 대한 공통 코드를 사용하여 일반 자바 스크립트와 함께 할 수있는 하나의 방법입니다 각 버튼은, 당신의 HTML 및 데이터에는 자바 스크립트 속성 없습니다 :

HTML :

<div id="buttonContainer"> 
<button data-content="content1">Content 1</button> 
<button data-content="content2">Content 2</button> 
<button data-content="content3">Content 3</button> 
</div> 

<div id="contentContainer"> 
<div id="content1">Showing Content 1</div> 
<div id="content2">Showing Content 2</div> 
<div id="content3">Showing Content 3</div> 
</div> 

자바 스크립트 :

var buttons = document.querySelectorAll("#buttonContainer button"); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener("click", function() { 
     var contentItem = this.getAttribute("data-content"); 
     var contents = document.querySelectorAll("#contentContainer div"); 
     for (var j = 0; j < contents.length; j++) { 
      contents[j].style.display = "none"; 
     } 
     document.getElementById(contentItem).style.display = "block"; 
    }); 
} 

근무 데모 : http://jsfiddle.net/jfriend00/rcDXX/

설명 :

1. 이 버튼을 포함하는 사업부를 만듭니다.
2. 다양한 콘텐츠 영역이 포함 된 div를 만듭니다.
3. 적절한 시작 상태에 대한 내용을 표시하거나 숨기는 CSS 규칙을 만듭니다.
4. 모든 버튼에 대해 일반 코드를 사용할 수 있도록 표시 할 콘텐츠 영역을 알려주는 데이터 속성을 각 버튼에 추가하십시오.
5. 모든 버튼을 nodeList로 가져옵니다.
6. 각 버튼에 클릭 이벤트 처리기를 설정합니다.
7. 해당 클릭 핸들러에서 해당 버튼에 표시 할 콘텐츠 ID를 가져옵니다.
8. 스타일을 style.display = "none"
9. 으로 설정하여 모든 콘텐츠 영역을 숨 깁니다. 원하는 콘텐츠 영역을 표시하십시오.

참고로, 여기에 도우미 함수를 사용하는 코드의 좀 더 고급 버전입니다 :

Answer 4

http://jsfiddle.net/jfriend00/aqMLt/ 그냥 jsfiddle http://jsfiddle.net/6EGT2/에 그것을했다. 버튼의 가시성을 전환하는 것처럼

<input type='button' value ='button1' onclick='showDiv("div1")'> 
<input type='button' value ='button2' onclick='showDiv("div2")'> 
<input type='button' value ='button3' onclick='showDiv("div3")'> 

<div id='div1'>content 1</div> 
<div id='div2'>content 2</div> 
<div id='div3'>content 3</div> 

Answer 5

것 같다 : 먼저 div의

function hideDiv(divid) 
{ 
    document.getElementById(divid).style.visibility= 'hidden'; 
} 

function showDiv(divid) 
{ 
    hideDiv('div1'); 
    hideDiv('div2'); 
    hideDiv('div3'); 
    document.getElementById(divid).style.visibility = ''; 
} 

지금 HTML을 표시하고 숨길 함수를 작성 내용이 아닙니다. 귀하의 콘텐츠 사업부의 ID는 무엇입니까?

제공 :

<div id="containerDiv"> 
    <div id="div1">blahblah</div> 
    <div id="div2">blahblah</div> 
    <div id="div3">blahblah</div> 
</div> 

은 그럼 그냥 "toggleVisibility"같은 함수로 이동 버튼을 설정합니다. 나는 이것을 테스트했으며 IE 5.5 이상, Firefox, Chrome 1.0 및 Safari에서 작동합니다.

function toggleVisibility(id){ 

    var containerDiv = document.getElementById("containerDiv"); 
    var innerDivs = containerDiv.getElementsByTagName("DIV"); 

    for(var i=0; i<innerDivs.length; i++) 
    { 
     if (i == id){ 
      innerDivs[i].style.visibility = "visible"; 
      innerDivs[i].style.display = ""; 
     } 
     else{ 
      innerDivs[i].style.visibility = "hidden"; 
      innerDivs[i].style.display = "none";   
     } 
    } 
} 

toggleVisibility(0);