masaki925/tabularize-x.html

## tabularize-x.html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <div class="tabs">
      <ul>
        <li class="active"><a href="#tab1" class="tab-link">Tab 1</a></li>
        <li><a href="#tab2" class="tab-link">Tab 2</a></li>
        <li><a href="#tab3" class="tab-link">Tab 3</a></li>
      </ul>
      <div id="tab1">
        <h3>Tab 1</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div id="tab2">
        <h3>Tab 2</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div id="tab3">
        <h3>Tab 3</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <script>
      var tabsWrapper = $(".tabs");
      var tabs = tabsWrapper.children("div");
      var tabLinks = tabsWrapper.find(".tab-link");
      var activeClass = "active";

      var activateLink = function(elem) {
        $("." + activeClass).removeClass(activeClass);
        $(elem).addClass(activeClass);
      };

      var activateTab = function(tabSelector) {
        tabs.hide();
        $(tabSelector).show();
      };

      var transition = function(selector) {
        activateTab(selector);
        activateLink(selector);
      };

      var active = location.hash;
      if(active) {
        transition(active);
      }
      tabLinks.click(function() {
        transition($(this).attr("href"));
        return false;
      });
    </script>

  </body>
</html>

	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	<body>
	<div class="tabs">
	<ul>
	<li class="active"><a href="#tab1" class="tab-link">Tab 1</a></li>
	<li><a href="#tab2" class="tab-link">Tab 2</a></li>
	<li><a href="#tab3" class="tab-link">Tab 3</a></li>
	</ul>
	<div id="tab1">
	<h3>Tab 1</h3>
	<p>Lorem ipsum dolor sit amet</p>
	</div>
	<div id="tab2">
	<h3>Tab 2</h3>
	<p>Lorem ipsum dolor sit amet</p>
	</div>
	<div id="tab3">
	<h3>Tab 3</h3>
	<p>Lorem ipsum dolor sit amet</p>
	</div>
	</div>
	<script>
	var tabsWrapper = $(".tabs");
	var tabs = tabsWrapper.children("div");
	var tabLinks = tabsWrapper.find(".tab-link");
	var activeClass = "active";

	var activateLink = function(elem) {
	$("." + activeClass).removeClass(activeClass);
	$(elem).addClass(activeClass);
	};

	var activateTab = function(tabSelector) {
	tabs.hide();
	$(tabSelector).show();
	};

	var transition = function(selector) {
	activateTab(selector);
	activateLink(selector);
	};

	var active = location.hash;
	if(active) {
	transition(active);
	}
	tabLinks.click(function() {
	transition($(this).attr("href"));
	return false;
	});
	</script>

	</body>
	</html>