2つのdivを非表示にして表示したい

Question

私のアプリケーションでは、div1をクリックしてdiv2を表示し、div1を非表示にしてdiv2をクリックするとdiv1が表示され、div2は消えます。

このコードを作成しましたが、機能しません。

<div ng-click="show2=true; show1=false" ng-show=show1"> 
 
    <center> 
 
    <i class="ion-arrow-down-b flecheCacherTacheEffectuee"></i> 
 
    <span class="titreTacheEffectue">TÂCHES EFFECTUÉES</span> 
 
    </center> 
 
</div> 
 
<div ng-show="show2" ng-click="show1= true; show2=false"> 
 
    <center> 
 
    <i class="ion-arrow-up-b flecheCacherTacheEffectuee"></i> 
 
    <span class="titreTacheEffectue">TÂCHES EFFECTUÉES</span> 
 
    </center> 
 
</div>

どうもありがとうございました。 show1 "

Answer 1

変更NG-ショー= show1" =するNG-ショー"

<div ng-click="show2=true; show1=false" ng-show="show1"> 
 
     <center> 
 
     <i class="ion-arrow-down-b flecheCacherTacheEffectuee"></i> 
 
      <span class="titreTacheEffectue">TEST 1</span> 
 
     </center> 
 
    </div> 
 
    <div ng-show="show2" ng-click="show1= true; show2=false"> 
 
     <center> 
 
     <i class="ion-arrow-up-b flecheCacherTacheEffectuee"></i> 
 
      <span class="titreTacheEffectue">TEST 2</span> 
 
     </center> 
 
    </div>

Answer 2

使用JS：。

function change(div_hide, div_show) { 
 
    var divA = document.getElementById(div_hide); 
 
    var divB = document.getElementById(div_show); 
 
    divA.style.display = "none"; 
 
    divB.style.display = "block"; 
 
}

<div id="div1" onclick="change('div1','div2');"> 
 
    <center> 
 
    <i class="ion-arrow-down-b flecheCacherTacheEffectuee"></i> 
 
    <span class="titreTacheEffectue">TÂCHES EFFECTUÉES DIV1</span> 
 
    </center> 
 
</div> 
 
<div id="div2" style="display:none;" onclick="change('div2','div1');"> 
 
    <center> 
 
    <i class="ion-arrow-up-b flecheCacherTacheEffectuee"></i> 
 
    <span class="titreTacheEffectue">TÂCHES EFFECTUÉES DIV2</span> 
 
    </center> 
 
</div>