<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tabWrap button.active{
background-color: yellow;
}
#tabWrap div{
width: 200px;
height: 200px;
background-color: #ccc;
display: none;
}
#tabWrap div.active{
display: block;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="tabWrap">
<button ng-repeat="item in tabs" ng-class="{true:'active',false:''}[$index==activeIndex]" ng-click="changeIndex($index)">
{{item.btn}}
</button>
<div ng-repeat="item in tabs" ng-class="{true:'active',false:''}[$index==activeIndex]">
{{item.content}}
</div>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[])
myApp.controller('myCtrl', ['$scope', function($scope){
// model->服務器返回的數(shù)據(jù)
$scope.tabs = [
{btn:"按鈕1", content: "買菜", id:1},
{btn:"按鈕2", content: "學習",id:2},
{btn:"按鈕3", content: "打游戲",id:3}
];
// 激活的下標
$scope.activeIndex = 0;
$scope.changeIndex = function (index){
// console.log(index)
$scope.activeIndex = index;
}
}])
</script>
</html>
使用angular實現(xiàn)tab切換案例
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來悯辙,“玉大人琳省,你說我怎么就攤上這事《阕” “怎么了针贬?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長拢蛋。 經(jīng)常有香客問我桦他,道長,這世上最難降的妖魔是什么谆棱? 我笑而不...
- 正文 為了忘掉前任快压,我火速辦了婚禮,結(jié)果婚禮上垃瞧,老公的妹妹穿的比我還像新娘蔫劣。我一直安慰自己,他們只是感情好个从,可當我...
- 文/花漫 我一把揭開白布脉幢。 她就那樣靜靜地躺著,像睡著了一般嗦锐。 火紅的嫁衣襯著肌膚如雪鸵隧。 梳的紋絲不亂的頭發(fā)上,一...
- 文/蒼蘭香墨 我猛地睜開眼昵宇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了儿子?” 一聲冷哼從身側(cè)響起瓦哎,我...
- 正文 年R本政府宣布租副,位于F島的核電站坐慰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏附井。R本人自食惡果不足惜讨越,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望永毅。 院中可真熱鬧把跨,春花似錦、人聲如沸沼死。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽意蛀。三九已至耸别,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間县钥,已是汗流浹背秀姐。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 鼠標移動上去,根據(jù)type的不同進行切換 ng-switch 和 ng-swtich-when 根據(jù)鼠標移動上去觸...
- 在 vue 中舷蟀,實現(xiàn) Tab 切換主要有三種方式:使用動態(tài)組件恤磷,使用 vue-router 路由,使用第三方插件野宜。...
- 相關(guān)文章推薦 Angular學習第一天:登錄功能 今天的實例是什么扫步? 是一個前端常見的tab標簽頁切換效果(效果預...
- 自從寫晨讀以來锌妻,我發(fā)現(xiàn)一個有趣的現(xiàn)象,就是每當生活中遇到什么疑難雜癥旬牲,晨讀內(nèi)容就會適時出現(xiàn)仿粹,既像朋友、知心姐姐原茅,也...
- 電影里看過太多關(guān)于愛情的橋段吭历,男生為女生可以做任何事情,只為博得紅顏一笑擂橘;女生同樣可以為了男生而百依百順晌区;最令人刻...