Developing With AngularJS? Forget jQuery Exists.

a.html

<div cool-stuff>
    <ul>
        <li class="active"><a class="link" href="#one">Click Me For One</a></li>
        <li><a class="link" href="#two">Click Me For Two</a></li>
    </ul>
    <p id="one" class="content">Some Cool stuff</p>
    <p id="two" class="content hidden">Some Other Stuff</p>
</div>

a.js

angular
  .module('MyApp', [])
  .directive('coolStuff', function() {
    return function(scope, element) {
      element.find('a.link').on('click', function(e) {
        var link = $(e.currentTarget);

        // make the current li have the active class and remove it from others
        link
          .parent('li')
          .addClass('active')
          .siblings('li')
          .removeClass('active');

        // hide all content divs
        element.find('.content').addClass('hidden');

        // show the one content div I want
        $(link.attr('href')).removeClass('hidden');

        e.preventDefault();
      });
    };
  });

b.js

angular
  .module('MyApp', [])
  .directive('coolStuff', function() {
    return function(scope, element) {
      element.find('a.link').on('click', function(e) {
        var link = angular.element(e.currentTarget);

        link
          .parent('li')
          .addClass('active')
          .siblings('li')
          .removeClass('active');
          
        element.find('.content').addClass('hidden');
        
        angular.element(link.attr('href')).removeClass('hidden');

        e.preventDefault();
      });
    };
  });

c.html

<div cool-stuff>
    <ul>
        <li ng-class="{ active : active.one }">
            <a class="link" href="#" ng-click="select('one')">Click Me For One</a>
        </li>
        <li ng-class="{ active : active.two }">
            <a class="link" href="#" ng-click="select('two')">Click Me For Two</a>
        </li>
    </ul>
    <p class="content" ng-if="active.one">Some Cool stuff</p>
    <p class="content" ng-if="active.two">Some Other Stuff</p>
</div>

c.js

angular
  .module('MyApp', [])
  .directive('coolStuff', function() {
    return function(scope) {
      var setFalse = function(val, link, active) {
        active[link] = false;
      };
      scope.active = {};
      scope.select = function(link) {
        _.each(scope.active, setFalse); // lodash used for brevity
          scope.active[link] = true;
      };
    };
  });