richhauck/tabs.html

## tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple Tabs</title>
    <style>
        .tab-links{
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        .tab-link.active{
            background-color: #fff;
        }
        .tab-links li{
            display: inline-block;
        }
        .tab{
            display: none;
        }
        .tab.active{
            display: block;
        }
    </style>
</head>
<body>

     <!-- Tab links -->
    <ul class="tab-links">
        <li class="tab-link"><a href="#harrisburg">Harrisburg</a></li>
        <li class="tab-link"><a href="#lancaster">Lancaster</a></li>
        <li class="tab-link"><a href="#york">York</a></li>
    </ul>

      <!-- Tab content -->
     <div class="tab-content">
        <div id="harrisburg-tab" class="tab">
        <h3>Harrisburg</h3>
        <p>Harrisburg's symbol is the strawberry.</p>
        </div>

        <div id="lancaster-tab" class="tab">
        <h3>Lancaster</h3>
        <p>Lancaster's symbol is the red rose.</p>
        </div>

        <div id="york-tag" class="tab">
        <h3>York</h3>
        <p>York's symbol is the white rose.</p>
        </div>
     </div>

      <script>
          /**
          * Displays tab
          * @param target {Object}  HTML button
          */
          const showTab = (target) => {
            const id = target.getAttribute('data-id');

            const tabLinks = document.getElementsByClassName('tab-link');
            const tabs = document.getElementsByClassName('tab');
            for (let i = 0; i < tabs.length; i++) {
                if(i == id){
                    tabLinks[i].classList.add('active');
                    tabs[i].classList.add('active');
                }else{
                    tabLinks[i].classList.remove('active');
                    tabs[i].classList.remove('active');
                }
            }
        }

        // Assign attributes and event listeners to tabs
        let hash = window.location.hash.substr(1);
        let link;
        let hasActive = false;
        let tabLinks = document.getElementsByClassName('tab-link');
        let tabs = document.getElementsByClassName('tab');

        for (let i = 0; i < tabLinks.length; i++) {

            tabLinks[i].children[0].setAttribute('data-id', i);

            // compare hash to link href values
            link = tabLinks[i].children[0].getAttribute('href');
            link = link.substring(1, link.length);

            // set tab to active if it matches hash
            if(hash === link){
                tabLinks[i].classList.add('active');
                tabs[i].classList.add('active');
                hasActive = true;
            }else{
                tabLinks[i].classList.remove('active');
                tabs[i].classList.remove('active');
            }

            // assign click listener
            tabLinks[i].children[0].addEventListener('click', function(e){
                showTab(this);
                return false;
                }, false);
        }
        // if hash doesn't match, set the first tab to active
        if(hasActive == false){
            tabLinks[0].classList.add('active');
            tabs[0].classList.add('active');
        }

      </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Simple Tabs</title>
	<style>
	.tab-links{
	margin: 0;
	padding: 0;
	background-color: #ccc;
	}
	.tab-link.active{
	background-color: #fff;
	}
	.tab-links li{
	display: inline-block;
	}
	.tab{
	display: none;
	}
	.tab.active{
	display: block;
	}
	</style>
	</head>
	<body>

	<!-- Tab links -->
	<ul class="tab-links">
	<li class="tab-link"><a href="#harrisburg">Harrisburg</a></li>
	<li class="tab-link"><a href="#lancaster">Lancaster</a></li>
	<li class="tab-link"><a href="#york">York</a></li>
	</ul>

	<!-- Tab content -->
	<div class="tab-content">
	<div id="harrisburg-tab" class="tab">
	<h3>Harrisburg</h3>
	<p>Harrisburg's symbol is the strawberry.</p>
	</div>

	<div id="lancaster-tab" class="tab">
	<h3>Lancaster</h3>
	<p>Lancaster's symbol is the red rose.</p>
	</div>

	<div id="york-tag" class="tab">
	<h3>York</h3>
	<p>York's symbol is the white rose.</p>
	</div>
	</div>

	<script>
	/**
	* Displays tab
	* @param target {Object} HTML button
	*/
	const showTab = (target) => {
	const id = target.getAttribute('data-id');

	const tabLinks = document.getElementsByClassName('tab-link');
	const tabs = document.getElementsByClassName('tab');
	for (let i = 0; i < tabs.length; i++) {
	if(i == id){
	tabLinks[i].classList.add('active');
	tabs[i].classList.add('active');
	}else{
	tabLinks[i].classList.remove('active');
	tabs[i].classList.remove('active');
	}
	}
	}

	// Assign attributes and event listeners to tabs
	let hash = window.location.hash.substr(1);
	let link;
	let hasActive = false;
	let tabLinks = document.getElementsByClassName('tab-link');
	let tabs = document.getElementsByClassName('tab');

	for (let i = 0; i < tabLinks.length; i++) {

	tabLinks[i].children[0].setAttribute('data-id', i);

	// compare hash to link href values
	link = tabLinks[i].children[0].getAttribute('href');
	link = link.substring(1, link.length);

	// set tab to active if it matches hash
	if(hash === link){
	tabLinks[i].classList.add('active');
	tabs[i].classList.add('active');
	hasActive = true;
	}else{
	tabLinks[i].classList.remove('active');
	tabs[i].classList.remove('active');
	}

	// assign click listener
	tabLinks[i].children[0].addEventListener('click', function(e){
	showTab(this);
	return false;
	}, false);
	}
	// if hash doesn't match, set the first tab to active
	if(hasActive == false){
	tabLinks[0].classList.add('active');
	tabs[0].classList.add('active');
	}

	</script>
	</body>
	</html>