Angular选项卡
前几天我发的东西,可能对于没有基础的人很难理解,那么今天,咱们就发点简单点的东西吧!
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选项卡的更多相关文章
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- Angular 选项卡
<div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...
- (笔记)angular选项卡变色
- angular实践第一弹:选项卡开发
在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...
- 用angular制作简单的选项卡
现在angular变得挺火热的,自己也去简单的学习了一下,学了几天下来觉得angular果然好用,但是现在只是停留在比较浅的层面上,要想学好angular还是得下一番功夫的.学了一点新知识就想和大家分 ...
- 用angular中的ng-repeat和ng-show来实现tab选项卡
虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...
- Angular页面选项卡切换要注意的toggleClass
在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="ac ...
- (笔记)angular 单选选项卡
- (笔记)angular material 选项卡用法
随机推荐
- 23.3Sum(三数和为零)
Level: Medium 题目描述: Given an array nums of n integers, are there elements a, b, c in nums such tha ...
- os模块与 sys模块
os模块是与操作系统交互的一个接口 ''' os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作 ...
- MySQL 小抄
1. 登录 mysql - u root -pEnter Password: 2. 查询端口 mysql> show global variables like "port" ...
- C语言两种方式实现矩阵的转置
#include"stdio.h" typedef struct{ int i,j; int v; }Triple; typedef struct{ Triple date[]; ...
- nginx 配置优化指令
worker_processes worker_processes指令是用来设计Nginx进程数,官方默认设为1,赋值太多了,将会对系统IO影响效率,降低Nginx服务器性能.但是为了让多核CPU能够 ...
- Linux私房菜阅读笔记
在线man:http://www.linux.com/linux-man-pages 计算机硬件五大单元: 1.输入 2.输出 3.控制单元 4.算数逻辑单元 5.内存 CPU种类 1.RISC( ...
- (转)source、sh、bash、./执行脚本的区别
source.sh.bash../执行脚本的区别 原文:https://www.cnblogs.com/sparkbj/p/5976100.html 1.source命令用法: source Fil ...
- jquery 属性选择器
jquery 属性选择器 第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...
- 修改OPENSUSE 桌面快速搜索快捷键
- lua "诡异"的return用法
https://yq.aliyun.com/articles/11387 lua "诡异"的return用法 德哥 2016-03-29 15:38:42 浏览5690 评论0 ...