Hash change of Bootstrap Tab

Hash change of Bootstrap Tabs

Hash change of Bootstrap Tab
----------------------------
customized bootstrap tab component. here hash address will be changing on clicking on the tabs. and when ever copy this changed address to a browser url address accordingly it will show corresponding content in tabs

index.html

    <div class="container">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="active">
                <a href="#about" role="tab" data-toggle="tab">
              About Us
          </a>
            </li>
            <li>
                <a href="#team" role="tab" data-toggle="tab">
                    <icon class="glyphicon glyphicon-team" aria-hidden="true"></icon> Team
                </a>
            </li>
            <li>
                <a href="#events" role="tab" data-toggle="tab">
                    <icon class="glyphicon glyphicon-facebook" aria-hidden="true"></icon> Events
                </a>
            </li>
            <li>
                <a href="#resources" role="tab" data-toggle="tab">
                    <i class="fa fa-cog"></i> Resources
                </a>
            </li>
            <li>
                <a href="#newsletter" role="tab" data-toggle="tab">
                    <i class="fa fa-cog"></i> Newsletter
                </a>
            </li>
            <li>
                <a href="#accreditation" role="tab" data-toggle="tab">
                    <i class="fa fa-cog"></i> Accreditation
                </a>
            </li>
            <li>
                <a href="#privacy" role="tab" data-toggle="tab">
                    <i class="fa fa-cog"></i> Privacy
                </a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane fade active in" id="about">
                <h2>Team</h2>
            </div>
            <div class="tab-pane fade" id="team">

                <h2>Team</h2>
            </div>

            <div class="tab-pane fade" id="events">

                <h2>Events</h2>
            </div>
            <div class="tab-pane fade" id="resources">


                <h2>Resources</h2>
            </div>
            <div class="tab-pane fade" id="newsletter">
                <h2>newsletter Content Goes Here</h2>

            </div>
            <div class="tab-pane fade" id="accreditation">
                <h2>Accreditation Content Goes Here</h2>

            </div>
            <div class="tab-pane fade" id="privacy">
                <h2>Privacy Content Goes Here</h2>

            </div>

        </div>

    </div>

script.js

/*
	
  1. Getting the hash value from current URL
  2. Traversing all tab buttons
  3. checking hash attribute with in each href of tab buttons
  4. if there click on it to perform hash change
   //akhil
 */
$(".nav-tabs").find("li a").last().click();

var url = document.URL;
var hash = url.substring(url.indexOf('#'));

$(".nav-tabs").find("li a").each(function(key, val) {

  if (hash == $(val).attr('href')) {

    $(val).click();

  }
  $(val).click(function(ky, vl) {

    console.log($(this).attr('href'));
    location.hash = $(this).attr('href');
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

styles

<link href="https://bootswatch.com/yeti/bootstrap.min.css" rel="stylesheet" />