Untitled

<div>
    <ul>
        <li>
            <div class="home-heading">Home</div>
        </li>
        <li>
            <div class="products-heading">Products</div>
        </li>
            <li>
            <div class="about-heading">About Us</div>
        </li>
        <li>
            <div class="contact-heading">Contact us</div>
        </li>
    </ul>
</div>

<div class="home">
    Welcome to Home
</div>

<div class="products">
    Welcome to Products
</div>

<div class="about">
    Welcome to About Us
</div>

<div class="contact">
    Welcome to Contact Us
</div>

$('.home-heading').on('click', function() {
    $(".home").show();
    $(".products").hide();
    $(".about").hide();
    $(".contact").hide();
});

$('.products-heading').on('click', function() {
    $(".home").hide();
    $(".products").show();
    $(".about").hide();
    $(".contact").hide();
});

$('.about-heading').on('click', function() {
    $(".home").hide();
    $(".products").hide();
    $(".about").show();
    $(".contact").hide();
});


$('.contact-heading').on('click', function() {
    $(".home").hide();
    $(".products").hide();
    $(".about").hide();
    $(".contact").show();
});

<div ng-controller="TestController">
    <ul>
        <li>
            <div class="home-heading" ng-click="showHome()">Home</div>
        </li>
        <li>
            <div class="products-heading" ng-click="showProducts()">Products</div>
        </li>
            <li>
            <div class="about-heading" ng-click="showAboutUs()">About Us</div>
        </li>
        <li>
            <div class="contact-heading" ng-click="showContact()">Contact us</div>
        </li>
    </ul>
</div>

<div class="home">
    Welcome to Home
</div>

<div class="products">
    Welcome to Home
</div>

<div class="about">
    Welcome to Home
</div>

<div class="contact">
    Welcome to Home
</div>

require(['app'], function(app) {
app.controller("TestController", function($scope) {

    $scope.showHome = function()     {
        alert('showHome is responding');
    };

    $scope.showProducts = function()     {
        alert('showProducts is responding');
    };

});
});

<div class="home" ng-show="ShowHomeContainer">
    Welcome to Home
</div>

$scope.ShowHomeContainer = false;

$scope.showHome = function(){
    $scope.ShowHomeContainer = true;
};

<body ng-app="ngAnimate">
    <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</body>

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.sample-show-hide.ng-hide-add.ng-hide-add-active,
.sample-show-hide.ng-hide-remove {
  opacity:0;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}