window.addEventListener("load", function() { makeTabs(".tabs") }); function makeTabs(selector) { tab_lists_anchors = document.querySelectorAll(selector + " li a"); divs = document.querySelector(selector).getElementsByTagName("div"); for (var i = 0; i < tab_lists_anchors.length; i++) { if (tab_lists_anchors[i].classList.contains('active')) { divs[i].style.display = "block"; } } for (i = 0; i < tab_lists_anchors.length; i++) { document.querySelectorAll(".tabs li a")[i].addEventListener('click', function(e) { for (i = 0; i < divs.length; i++) { divs[i].style.display = "none"; } for (i = 0; i < tab_lists_anchors.length; i++) { tab_lists_anchors[i].classList.remove("active"); } clicked_tab = e.target || e.srcElement; clicked_tab.classList.add('active'); div_to_show = clicked_tab.getAttribute('href'); document.querySelector(div_to_show).style.display = "block"; }); } }
<div class="tabs"> <ul> <li><a href="#tab1" class="active">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <h1>Tab 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil illo nobis sunt dolor iure nulla perferendis reprehenderit mollitia inventore laudantium cum deserunt quisquam esse excepturi aliquam eius cumque numquam.</p> </div> <div id="tab2"> <h1>Tab 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque id iste quo quisquam hic dicta natus porro voluptatum illo in doloribus eligendi itaque vitae reprehenderit fugiat enim vero a sunt.</p> </div> <div id="tab3"> <h1>Tab 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga porro amet voluptates dolorem hic minima officiis sed quae esse laborum eveniet maiores voluptatem architecto aspernatur aliquid nihil repellendus atque praesentium.</p> </div> </div>
.tabs{ overflow:hidden; clear:both; } .tabs ul{ list-style-type:none; bottom: -1px; position:relative; } .tabs li{ float:left; } .tabs a{ display:block; padding:5px 10px; background-color: #EEE; color: #000; text-decoration: none; margin: 0 4px; border-top:1px solid #CCC; border-left:1px solid #DDD; border-right:1px solid #DDD; font:13px/18px verdana,arial,sans-serif; border-bottom:1px solid #CCC; } .tabs a.active{ background-color: #fff; border-bottom:1px solid #fff; } .tabs div{ clear: both; border:1px solid #CCC; padding:5px; font-family:verdana; font-size:13px; background-color: #fff; display:none; }