我們知道，選項卡是現代web網頁中最常用的效果之一，這次為大家帶來Angularjs如何實作mvvm式選項卡？案列+代碼，下面就是實戰案例，一起來看一下。
本文重點是用angularjs這個非常火mvvm框架，實現選項卡效果。在此之前，先搬出我們常用的jquery實作。
1、jquery實作簡單粗暴的選項卡效果
var nav = $(".tabs");//tab切换var box = $(".box");//容器nav.on("click", function(){ //点击事件
var this_index=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
box.eq(this_index).show().siblings().hide();
});在這裡只給js核心部分，html和css不做贅述。
以上程式碼，簡單粗暴的實現了選項卡效果，用點擊事件獲得elem.index(), 把索引和容器串起來控制顯示隱藏。
2、angularjs實作一個簡單選項卡效果
Html部分
<section ng-app="myApp">
<div class="tabs tabs-style" ng-controller="TabController as tab">
<nav>
<ul>
<li ng-class="{'current':tab.isSet(1)}">
<a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
<li ng-class="{'current':tab.isSet(2)}">
<a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
<li ng-class="{'current':tab.isSet(3)}">
<a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
<li ng-class="{'current':tab.isSet(4)}">
<a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
<li ng-class="{'current':tab.isSet(5)}">
<a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li>
</ul>
</nav>
<div class="content">
<section id="section-1" ng-show="tab.isSet(1)">
<p>1</p>
</section>
<section id="section-2" ng-show="tab.isSet(2)">
<p>2</p>
</section>
<section id="section-3" ng-show="tab.isSet(3)">
<p>3</p>
</section>
<section id="section-4" ng-show="tab.isSet(4)">
<p>4</p>
</section>
<section id="section-5" ng-show="tab.isSet(5)">
<p>5</p>
</section>
</div>
</div>
</section>css 部分（這裡為了方便我們使用Less語法，童鞋們可以自訂css實現個性效果）
* { margin: 0; padding: 0;
}body { background: #e7ecea; font-weight: 600; font-family: 'Raleway', Arial, sans-serif; text-align: center;
}a { color: #2CC185; text-decoration: none; outline: none;
&:hover { color: #74777b;
}
}.tabs { position: relative; width: 100%; margin: 30px auto 0 auto;
nav {
ul { position: relative; display: flex; max-width: 1200px; margin: 0 auto; list-style: none; flex-flow: row wrap; justify-content: center;
li { flex: 1;
&.current a { color: #74777b;
}
}
}
}
a { display: block; position: relative; overflow : hidden; line-height: 2.5;
span { vertical-align: middle; font-size: 1.5em;
}
}
}.content { position: relative;
section { /* display: none; */
margin: 0 auto; max-width: 1200px;
&.content-current { /* display: block; */
}
p { color: rgba(40,44,42, 0.4); margin: 0; padding: 1.75em 0; font-weight: 900; font-size: 5em; line-height: 1;
}
}
}.tabs-style {
nav { /* background: rgba(255,255,255,0.4); */
ul li {
a { overflow: visible;
border-bottom: 1px solid rgba(0,0,0,0.2); -webkit-transition: color 0.2s; transition: color 0.2s;
}
}
ul li.current a{
&:after, &:before { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: solid transparent;
}
&:after { margin-left: -10px; border-width: 10px; border-top-color: #e7ecea;
}
&:before { margin-left: -11px; border-width: 11px; border-top-color: rgba(0,0,0,0.2);
}
}
}
}js部分
angular.module('myApp', [])
.controller('TabController', function() { this.current = 1;
this.setCurrent = function (tab) { this.current = tab;
};
this.isSet = function(tab) { return this.current == tab;
};
});最後效果如下圖所示：
透過上述程式碼，我們可以發現實作的核心是angularjs內建的ng-class和ng-click，ng-show指令。通俗來講：controller裡定義了current 這條數據預設值為1，ng-click給點擊事件自訂函數，改變current數據，ng-class透過獲得current的值綁定條件，給目前選取的索引添加current樣式，容器同樣取得controller裡的current資料透過ng-show控制顯示隱藏。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是Angularjs如何實作mvvm式選項卡？案列+代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
