我有四个按钮和四个 div
。现在,我一次只想显示一个 div
。这意味着,如果我点击第一个按钮,只有第一个 div
应该可见,其他的应该被隐藏。
我已经搜索了很多但没有运气。请帮我。我试过只显示如下:
html
<button ng-click="showAbout();">About Page</button>
<button ng-click="showhelp();">Help page</button>
<button ng-click="showinfo();">Info Page</button>
<button ng-click="showref();">Refrence page</button>
<div class="form-group" ng-show="showabout">
<p>About page</p>
</div>
<div class="form-group" ng-show="showhelp" >
<p>Help page</p>
</div>
<div class="form-group" ng-show="showinfo" >
<p>Info</p>
</div>
<div class="form-group" ng-show="showref" >
<p>Refrence</p>
</div>
js
$scope.showabout = true;
$scope.showAbout = function () {
$scope.showhelp = false;
$scope.showinfo = false;
$scope.showref = false;
};
$scope.showhelp = true;
$scope.showhelp = function () {
$scope.showabout = false;
$scope.showinfo = false;
$scope.showref = false;
};
$scope.showinfo = true;
$scope.showinfo = function () {
$scope.showabout = false;
$scope.showhelp = false;
$scope.showref = false;
};
$scope.showref = true;
$scope.showref = function () {
$scope.showabout = false;
$scope.showhelp = false;
$scope.showinfo = false;
};
最佳答案
使用这个:Fiddle
<button ng-click="show = 1">About Page</button>
<button ng-click="show = 2">Help page</button>
<button ng-click="show = 3">Info Page</button>
<button ng-click="show = 4">Refrence page</button>
<div class="form-group" ng-show="show==1" >
<p>About page</p>
</div>
<div class="form-group" ng-show="show==2" >
<p>Help page</p>
</div>
<div class="form-group" ng-show="show==3" >
<p>Info</p>
</div>
<div class="form-group" ng-show="show==4" >
<p>Refrence</p>
</div>
关于javascript - 在angularjs中单击按钮显示一个div并隐藏其他div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32884389/