从一个div移到另一个

Question

Currently I have only contents of div=content2 visible on my screen. It has some content and a button. All other div's content are not visible (the display style of other div's are set to none) Now when I click on the button I want the content of only div=ContentXYZ to be displayed. Basically I want to move from current div content to a different div content.

I don't want anything from my current screen to be visible I just want all the contents of another div to be displayed.

Answer 1

With Javascript you can alter the display properties of the divs. You could add a onclick function to your button where you change the styling of the div element.

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

Answer 2

A working sample

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>

Javascript

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

more reference: Replace Div Content onclick

Answer 3

The most angular way to do it would probably be with ng-class. ng-class conditionally applies a class for example:

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

This would apply class visible if div1 is true.

Here is a working example: https://plnkr.co/edit/q2XzDbdxPMBFJUl5X7kl?p=preview