快捷導(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)文章

AngularJs基本特性解析(一)
angularjs是javascript的一個(gè)框架，通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下
2016-07-07
AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)的兩種方式，一種是通過(guò)普通指令實(shí)現(xiàn)標(biāo)簽頁(yè)，另外一種是通過(guò)自定義指令實(shí)現(xiàn)的標(biāo)簽頁(yè)，有需要的朋友們可以來(lái)參考借鑒，下面來(lái)一起看看吧。
2016-09-09
angular.js指令中的controller、compile與link函數(shù)的不同之處
最近一位大神問(wèn)了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來(lái)，所以必須要深入的探究下，下面這篇文章主要介紹了關(guān)于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。
2017-05-05
詳解angular2封裝material2對(duì)話框組件
本篇文章主要介紹了詳解angular2封裝material2對(duì)話框組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
AngularJS學(xué)習(xí)筆記之依賴注入詳解
下面小編就為大家?guī)?lái)一篇AngularJS學(xué)習(xí)筆記之依賴注入詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
淺談Angular的$q, defer, promise
本文主要對(duì)Angular的 $q, defer, promise進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
AngularJs E2E Testing 詳解
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細(xì)的資料，及簡(jiǎn)單代碼示例，有興趣的小伙伴可以參考下
2016-09-09
angularjs2中父子組件的數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了angularjs2中父子組件的數(shù)據(jù)傳遞的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析
這篇文章主要為大家介紹了Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10