Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="myCtrl">
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);">
<a href="javascript: void(0);">{{tab.title}}</a>
</li>
</ul>
<br />
<ul class="tablist">
<li id="selectedTab"><a href="javascript: void(0);">Admin</a></li>
</ul>
<br />Selected: {{selected}}
<br />Previous: {{previous}}
</div>
CSS
.tablist {
list-style: none;
height: 35px;
padding: 0px;
margin: 0px;
border: none;
}
.tablist li {
float: left;
margin-right: 1px;
}
.tablist li a {
display: block;
padding: 0 10px;
text-decoration: none;
border: 2px solid #FFFFFF;
border-bottom: 0px;
font-weight: bold;
color: #FFFFFF;
background: -webkit-linear-gradient(#14A4E6, #1EBFEF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#14A4E6, #1EBFEF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#14A4E6, #1EBFEF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#14A4E6, #1EBFEF); /* Standard syntax (must be last) */
-webkit-border-top-right-radius: 7px;
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
}
.tablist li a:hover {
background: -webkit-linear-gradient(#0372E2, #1EBDEE); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0372E2, #1EBDEE); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0372E2, #1EBDEE); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0372E2, #1EBDEE); /* Standard syntax (must be last) */
text-decoration: none;
}
.tablist li#selectedTab a {
background: none;
border: 2px solid #6B74C6;
border-bottom: 0px;
background-color: #F3F3F3;
color: #0378D9;
text-decoration: none;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.title = "Lensmakers Optical Inc.";
$scope.address = "990 Upper Wentworth St. Hamilton L9A-5E9";
$scope.contact = "Tel. 905-387-1601";
$scope.tabList = [
{ "title": "Admin", "selected": true },
{ "title": "Profile", "selected": false },
{ "title": "Optical", "selected": false }
];
$scope.selected = 0;
$scope.previous = 0;
$scope.setSelected = function(index) {
$scope.previous = $scope.selected;
$scope.selected = index;
$scope.tabList[$scope.previous].selected = false;
$scope.tabList[$scope.selected].selected = false;
};
});