Question

我在页面中有一个div。让我们称之为let values = [1, 4, 6, -10, -83]; let hasNegative = values.some(v => v < 0);。 div包含一个链接，比如说＆＃39; Link1＆＃39;。我想点击div1并将Link1替换为div1，其div2; Link2 onclick将Link2替换为div2。需要使用javascript / angularjs / html / css完成此操作。

Answer 1

由于您没有对要求的描述，我将以最一般的方式回答这个问题。

我的解决方案是使用vanilla Javascript通过事件监听器来操作DOM。您可以随意翻译我的方法。

您可以通过切换其他div的CSS显示属性来完成此操作。

运行以下内容并注意更重要的部分是Javascript：

＆＃13;

let div1 = document.getElementById('div1')
let div2 = document.getElementById('div2')
let link1 = document.getElementById('link1')
let link2 = document.getElementById('link2')

link1.addEventListener("click", function () {
  div1.style.display = "none"
  div2.style.display = "block"
})

link2.addEventListener("click", function () {
  div2.style.display = "none"
  div1.style.display = "block"
})

＆＃13;

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  position: absolute;
}

#div2 { 
  display: none;
  background-color: red;
}

#div1 {
  display: block;
  background-color: green;
}

＆＃13;

<div id="div1"> 
  <a id="link1" href="#">Link 1</a>
</div>
<div id="div2"> 
  <a id="link2" href="#">Link 2</a>
</div>

＆＃13;

Answer 2

使用angularJS执行此操作的一种方法是使用ng-if和ng-click锚标记，如果要将其显示为链接，则必须在其中使用href（此处为代码{{3} }）：

<div>
   <div ng-if="show1==true">
     <a href ng-click="show()">Show 2</a>
   </div>
   <div ng-if="show2==true">
     <a href ng-click="show()">Show 1</a>
   </div>
</div>

在脚本部分：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
        $scope.show1 = true;
    $scope.show2 = false;
    $scope.show = function()
    {
            if ($scope.show1 == true)
        {
                $scope.show1 = false;
            $scope.show2 = true;
        }
        else
        {
                $scope.show2 = false;
            $scope.show1 = true;
        }
    }
});

这只是使用angularJS的一种方法。

Answer 3

这也将使用ng-if和ng-click进行简单的切换功能。 https://jsfiddle.net/suunyz3e/1393/

html：

   <div ng-app="myModule">
      <div ng-controller="myCtrl">
          <div ng-if="showDiv1" ng-click="toggleDivs()">div1</div>
          <div ng-if="!showDiv1" ng-click="toggleDivs()">div2</div>
      </div>
    </div>

角度模块和控制器

angular.module('myModule', [])
.controller('myCtrl', function ($scope) {
   $scope.showDiv1 = true;
   $scope.toggleDivs = function(){
        $scope.showDiv1 = !$scope.showDiv1
   }

});

如何用div中的另一个<div>替换<div>替换<div>

3 个答案: