JSFiddle - React, Tailwind, and code Playground

by Ming Huang

HTML

<body>
<div data-role="page">

  <div class="navigatorTab">
    <ul id="mainUl" class="nav nav-tabs" ng-init="tab=1">
      <li ng-class="{active:tab===1}"><a href ng-click="tab=1">General Inquery</a></li>
      <li ng-class="{active:tab===2}"><a href ng-click="tab=2">Request For Audition</a></li>
      <li ng-class="{active:tab===3}"><a href ng-click="tab=3">Request The Band</a></li>
     </ul>
      
  </div>
  <div id="generalInquery" ng-show="tab===1">
    <h3 class="contactHeader">Contact Us:</h3>
    
  </div>
  <div id="Audition" ng-show="tab===2">
    <h3 class="contactHeader">Request for Audition:</h3>
    
  </div>
         
  <div id="requestBand" ng-show="tab===3">
    <h3 class="contactHeader">Request The Band:</h3>
    
  </div>

</div>


<div data-role="footer" id="home_footer">
    <div class="fb-like" data-href="https://www.facebook.com/pages/The-191st-Army-Band-Band-of-the-Wild-West/109140929157153" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
    <p class="snowText">191st Army Band</p>
    <p class="snowText">Tel: <a href="tel:925-875-4435">925-875-4435</a><p>
    <p class="snowText">Email: <a href="mailto:[email protected]">[email protected]</a></p>
    <p class="snowText">Copyright © 2015 Developed by MZProjects, All rights reserved.</p>
</div>	<!--Ends Footer-->
</div>


</body>

</html>

CSS

.contactMain {
  margin: 0 auto;
  max-width: 800px;
  color: #333;
  background-color: rgba(252, 250, 247, 0.99);
  padding: 15px;
  text-align: left;
  border-radius: 0px 0px 10px 10px; }

.contactMainPre {
  margin: 0 auto;
  max-width: 800px;
  color: #333;
  background-color: rgba(252, 250, 247, 0.99);
  padding: 15px;
  text-align: left;
  border-radius: 0px; }

.contactHeader {
  text-decoration: underline;
  margin: 0 auto;
  max-width: 800px;
  color: #333;
  background-color: rgba(252, 250, 247, 0.99);
  padding: 15px;
  text-align: center; }

/***Change the nav font color* */
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
  color: black; }

.navigatorTab {
  border-radius: 10px 10px 0px 0px;
  max-width: 800px;
  padding: 0px;
  background-color: rgba(252, 250, 230, 0.99);
  text-align: center;
  margin: 0 auto; }
  .navigatorTab ul li {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: inline-block; }

@media screen and (max-width: 540px) {
  .navigatorTab ul li {
    display: block; } }

/*# sourceMappingURL=contactCss.css.map */

JavaScript

// declare a module
var contactModule = angular.module('contactModule', []);
/**
contactModule.controller('changeTab',['$scope', function($scope){
  $scope.greeting='hello';
}]);

// configure the module.
**/

$("document").ready(function(){
  
    var oldURL = document.referrer;
    if(oldURL === "http://191armyband.com/career.html"){
      $("#mainUl").ng-init="tab=2"
    } else{
      $("#mainUl").ng-init="tab=1"
    };
 
});