JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<div ng-app="plunker">
    <ul ng-controller="MainCtrl" class="nav">
      <li ng-repeat="item in collection"
             ng-class="{ 'active': $index == selectedIndex }"
             ng-click="itemClicked($index)">
        {{ item }}
      </li>
    </ul>
</div>

CSS

.nav{
    height:24px;
    background:#333;
    color:#fff;
    padding:0;
}
.nav li{
    list-style:none;
    float:left;
    padding:3px 12px;
    cursor:pointer;
}
.nav li:hover, .nav li.active{
    background:#fff;
    color:#333;
}

JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.collection = ["Item 1", "Item 2", "Item 3"];
  
  $scope.selectedIndex = 0;
  
  $scope.itemClicked = function ($index) {
    console.log($index);
    $scope.selectedIndex = $index;
  }
});