angularJS 实现选项卡功能

全栈若城

发布于 2024-02-29 09:27:07

22700

代码可运行

文章被收录于专栏：若城技术专栏若城技术专栏

运行总次数：0

代码可运行

先上效果图

css代码比较简单不做过多解释哈

*{
			margin: 0;
			padding: 0;
		}
		.odiv{
			width: 500px;
			height: auto;
			margin: 0 auto;
		}
		ul li{
			list-style: none;
			float: left;
			width: 98px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			border: 1px solid #999;
		}
		p{
			width: 500px;
			height: 300px;
			border: 1px solid #000000;
			border-top: none;
		}

// aaa指的是点击导航时所变得背景颜色 
		.aaa{
			background: #ff0;
		}

html代码

<!-- 通过 ng-app 来定义angular执行位置 ， 通过ng-controller 来确定控制器的执行-->
	<body ng-app="myApp" ng-controller="myCtrl">
		<div class="odiv" >
	<!--ng-init="seleted=0"  初始设置seleted 的索引值为0 -->
			<ul ng-init="seleted=0">
	<!--ng-class="{aaa:seleted==$index}"  定义class名为aaa 并定义选中第几个li, 
		ng-repeat="item in lists" 遍历数据
		 ng-click="tab($index)" 点击谁就让谁出现改变
	-->
				<li  ng-class="{aaa:seleted==$index}" ng-repeat="item in lists" ng-click="tab($index)">
					{{item.name}}
				</li>
			</ul>
	<!--ng-show="seleted==$index"  通过show函数来确定谁显示，谁隐藏-->
			<p ng-show="seleted==$index" ng-repeat="item in lists">
				{{item.con}}
			</p>
		</div>
		
	</body>

angular代码

//定义模板，控制器
		var module=angular.module("myApp",[]);
		module.controller("myCtrl",function($scope){
			$scope.lists=[
				{"name":"李白","con":"金樽清酒斗十千"},
				{"name":"白居易","con":"玉盘珍羞直万钱"},
				{"name":"杜甫","con":"安得广厦千万间"},
				{"name":"李贺","con":"大庇天下寒士俱欢颜"},
				{"name":"李清照","con":"一帘幽梦，一世情肠"}
				
			];
			//定义seleted 
			var seleted=$scope.seleted
			//对seleted 进行赋值
			$scope.tab=function(index){
				$scope.seleted=index
				
			}
		
			
		})