2016-10-30 2 views
0

현재 div=content2의 내용 만 내 화면에 표시됩니다. 그것은 약간의 내용과 버튼을 가지고 있습니다. 다른 div의 내용은 표시되지 않습니다 (다른 div의 표시 스타일은 none으로 설정 됨). 이제 버튼을 클릭하면 div=ContentXYZ의 내용 만 표시됩니다. 기본적으로 현재 div 콘텐츠를 다른 div 콘텐츠로 옮기고 싶습니다.한 div에서 다른 div로 이동

현재 화면의 내용이 보이지 않게하려면 다른 div의 모든 내용을 표시하고 싶습니다.

+1

가능한 중복 http://stackoverflow.com/questions/17638990/jquery-show-and-hide : 여기

은 작업 예입니다 -div-on-mouse-click-animate) –

답변

0

자바 스크립트를 사용하면 div의 표시 속성을 변경할 수 있습니다. div 요소의 스타일을 변경하는 버튼에 onclick 함수를 추가 할 수 있습니다.

function displayDiv(){ 
    document.getElementById("ContentXYZ").style.display = "inline"; 
} 
0

작업 예제

HTML

<div id="content2"> 
    Content 2 goes here 
    <button id="btn">Change Div</button> 
</div> 

<div id="contentXYZ" style="display:none;"> 
    Content XYZ goes here 
</div> 

$('#btn').on('click',function(){ 
    $('#content2').css('display','none'); 
    $('#contentXYZ').css('display','block'); 
}); 

이상의 참조 자바 스크립트 : Replace Div Content onclick

+0

div id는 무엇입니까? contentXYZ는 다른 div 안에 있으며 여전히 작동합니까? – Anirban

+0

예, 상위 div가 표시되면 제공됩니다. 그렇지 않으면'$ ('# contentXYZ')와 같은 것을 할 필요가있을 것이다 .css ('display', 'block'); 부모 ('div') .css ('display', 'block');'모든 것을 부모에게 보이도록 설정합니다. – jyloo

+0

상위 div를 보이지 않게 설정하고 하위 div를 계속 표시 할 수 있습니까? – Anirban

0

아마도 가장 쉬운 방법은 ng-class를 사용하는 것입니다. ng-class는 조건부로 클래스를 적용합니다. 예 :

ng-class="{'visible': div1}" 

div1이 true이면 클래스가 표시됩니다. https://plnkr.co/edit/q2XzDbdxPMBFJUl5X7kl?p=preview

[마우스 클릭에 JQuery와 쇼 숨기기 사업부 (애니메이션) (의
관련 문제