AngularJS 用angularJS实现tab栏切换 (ng-switch[ on])

houyanhua1

于 2018-04-28 21:32:48 发布

阅读量1.6k

点赞数 1

分类专栏： AngularJS 文章标签： angularjs ng-switch tab栏切换

本文链接：https://blog.csdn.net/houyanhua1/article/details/80139538

版权

本文介绍如何利用AngularJS的ng-switch指令创建动态Tab切换效果，通过实例代码详细解析其工作原理和使用方法，帮助开发者掌握在Web应用中实现Tab栏切换的技术。

摘要由CSDN通过智能技术生成

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<style>
		nav a {
			display: inline-block;
			width: 100px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: pink;
			text-decoration: none;
		}

		.active {
			background-color: red;
		}

		section {
			width: 425px;
			height: 400px;
			background-color: lightyellow;
		}

	</style>
	<script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
	
	<div ng-controller="DemoController">
		<nav>
			<a href="javascript:;" ng-click="myClick('local')" ng-class="{active:type == 'local'}">国内新闻</a>