前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!

Angular显示隐藏,选项卡!

还是那句话,话不多说,上代码:

 <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
#Box{
display: block;
border: 1px solid black;
width: 50%;
height: 400px;
margin: 100px auto;
}
nav{
display: flex;
background: #BFBFBF; }
nav a{
display: flex;
justify-content: space-around;
width: 33.3%;
height: 40px;
line-height: 40px;
color: black;
}
.active{
background-color: red;
color: white;
}
.page{
font-size: 3rem;
margin: 150px 40%;
}
</style> //别忘了引入Angular的插件哦!
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-controller="test">
<div id="Box">
<nav>
<a ng-class="{'active':tabIndex==0}" href="javascript:;" ng-click="tab(0)">tab1</a>
<a ng-class="{'active':tabIndex==1}" href="javascript:;" ng-click="tab(1)">tab2</a>
<a ng-class="{'active':tabIndex==2}" href="javascript:;" ng-click="tab(2)">tab3</a>
</nav>
<div class="pages">
<div class="page" ng-show="tabIndex==0">tab1</div>
<div class="page" ng-show="tabIndex==1">tab2</div>
<div class="page" ng-show="tabIndex==2">tab3</div>
</div>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('test',function($scope){
//定义要聚焦的索引
$scope.tabIndex=0;
//更改要聚焦的tab
$scope.tab=function(index){
$scope.tabIndex=index;
}
});
</script>
</body>
</html>

就是这么简单!你们看懂了吗???

Angular选项卡的更多相关文章

  1. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  2. Angular 选项卡

    <div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...

  3. (笔记)angular选项卡变色

  4. angular实践第一弹:选项卡开发

    在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...

  5. 用angular制作简单的选项卡

    现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...

  6. 用angular中的ng-repeat和ng-show来实现tab选项卡

    虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...

  7. Angular页面选项卡切换要注意的toggleClass

    在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="ac ...

  8. (笔记)angular 单选选项卡

  9. (笔记)angular material 选项卡用法

随机推荐

  1. 23.3Sum(三数和为零)

    Level:   Medium 题目描述: Given an array nums of n integers, are there elements a, b, c in nums such tha ...

  2. os模块与 sys模块

    os模块是与操作系统交互的一个接口 ''' os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作 ...

  3. MySQL 小抄

    1. 登录 mysql - u root -pEnter Password: 2. 查询端口 mysql> show global variables like "port" ...

  4. C语言两种方式实现矩阵的转置

    #include"stdio.h" typedef struct{ int i,j; int v; }Triple; typedef struct{ Triple date[]; ...

  5. nginx 配置优化指令

    worker_processes worker_processes指令是用来设计Nginx进程数,官方默认设为1,赋值太多了,将会对系统IO影响效率,降低Nginx服务器性能.但是为了让多核CPU能够 ...

  6. Linux私房菜阅读笔记

    在线man:http://www.linux.com/linux-man-pages 计算机硬件五大单元: 1.输入 2.输出 3.控制单元 4.算数逻辑单元 5.内存   CPU种类 1.RISC( ...

  7. (转)source、sh、bash、./执行脚本的区别

    source.sh.bash../执行脚本的区别  原文:https://www.cnblogs.com/sparkbj/p/5976100.html 1.source命令用法: source Fil ...

  8. jquery 属性选择器

    jquery 属性选择器   第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...

  9. 修改OPENSUSE 桌面快速搜索快捷键

  10. lua "诡异"的return用法

    https://yq.aliyun.com/articles/11387 lua "诡异"的return用法   德哥 2016-03-29 15:38:42 浏览5690 评论0 ...