JS tabs error need help

Posted on 2012-09-03
Last Modified: 2012-09-05
Hey all,

Im having trouble with this script, which is showing and hiding tabs. I have an error on this line:


Open in new window

var Site = {
			start: function(){
			tabsShow: function(){	
			var container = document.getElementById("tabContainer");
    			// set current tab
    			var navitem = container.querySelector(".tabs ul li");
    			//store which tab we are on
    			var ident ="_")[1];
    			//set current tab with class of activetabheader
    			//hide two tab contents we don't need
    			var pages = container.querySelectorAll(".tabpage");
    			for (var i = 1; i < pages.length; i++) {
    			//this adds click event to tabs
    			var tabs = container.querySelectorAll(".tabs ul li");
    			for (var i = 0; i < tabs.length; i++) {
			displayPage: function() {
			var current = this.parentNode.getAttribute("data-current");
			  //remove class of activetabheader and hide old contents
			  document.getElementById("tabHeader_" + current).removeAttribute("class");
			  document.getElementById("tabpage_" + current).style.display="none";
			  var ident ="_")[1];
			  //add class of activetabheader to new active tab and show contents
			  document.getElementById("tabpage_" + ident).style.display="block";
		window.addEvent('domready', Site.start);

Open in new window

<!DOCTYPE html>
<meta charset="utf-8">
<title>Pure Javascript, HTML 5 &amp; CSS3 Tabs</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/mootools.js"></script>

<div id="wrapper">
  <div id="tabContainer">
    <div class="tabs">
        <li id="tabHeader_1">Page 1</li>
        <li id="tabHeader_2">Page 2</li>
        <li id="tabHeader_3">Page 3</li>
    <div class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
      <div class="tabpage" id="tabpage_2">
        <h2>Page 2</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
      <div class="tabpage" id="tabpage_3">
        <h2>Page 3</h2>
        <p>Pellentesque habitant morbi tristique senectus...</p>
<script src="js/puretabs.js"></script>

Open in new window

Question by:yando18
    1 Comment
    LVL 5

    Accepted Solution

    Try changing your code

    Open in new window


    Open in new window

    for more information on addEventListener please visit

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now