快捷導(dǎo)航

利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門效果

更新時(shí)間：2017年02月28日 14:23:44 作者：歪脖醬

本文主要介紹了利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果圖：(點(diǎn)擊'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  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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

angular2系列之路由轉(zhuǎn)場(chǎng)動(dòng)畫的示例代碼
本篇文章主要介紹了angular2系列之路由轉(zhuǎn)場(chǎng)動(dòng)畫的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-11-11
在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例
本篇文章主要介紹了在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-03-03
詳解angular中的作用域及繼承
本篇文章主要介紹了詳解angular中的作用域及繼承，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-05-05
Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向，實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面,這個(gè)功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會(huì)用到，下面小編給大家?guī)?lái)了解決方法一起看看吧
2018-05-05
Angular5.0 子組件通過service傳遞值給父組件的方法
這篇文章主要介紹了Angular5.0 子組件通過service傳遞值給父組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-07-07
關(guān)于 angularJS的一些用法
這篇文章主要介紹了關(guān)于 angularJS的一些用法的相關(guān)資料,需要的朋友可以參考下
2017-11-11
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-07-07
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下
2016-04-04
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實(shí)它們?cè)诠俜降奈臋n里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來(lái)講
2015-10-10
詳解Angular4中路由Router類的跳轉(zhuǎn)navigate
這篇文章主要介紹了詳解Angular4中路由Router類的跳轉(zhuǎn)navigate，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06