利用angularjs1.4制作的简易滑动门效果
程序员文章站
2022-07-05 20:30:58
效果图：(点击'python'效果)
代码如下：
<...
效果图：(点击'python'效果)
代码如下：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" rel="external nofollow" rel="stylesheet">
<title></title>
</head>
<body ng-app="app" ng-controller="magazine">
<div class="container" >
<div class="row" >
<div class="col-md-4 col-md-offset-4">
<ul>
<li class="pull-left" ng-click="toggle()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >jquery</a></li>
<li class="pull-left" ng-click="toggle2()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >python</a></li>
</ul>
</div>
<div class="col-md-6" ng-show="myvar">
<p>我就是我</p>
</div>
<div class="col-md-6" ng-show="myvar2">
<p>注意注意我变了</p>
</div>
</div>
</div>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/**
* app module
*
* description
*/
angular.module('app', []).controller('magazine', ['$scope', function($scope){
$scope.myvar = true;
$scope.myvar2 = false;
$scope.toggle = function () {
$scope.myvar = true;
$scope.myvar2 = false;
}
$scope.toggle2 = function () {
$scope.myvar = false;
$scope.myvar2 = true;
}
}])
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： 深究AngularJS中$sce的使用
下一篇： 动态Axios的配置步骤详解