Search the Community

HTML/CSS + Javascript Gude to Tabs Tabbed browsing is something we've all become accustomed to over the past several years and the concept has permiated the web as well. Through tabs you can maximize spacial area on your website with several different sources of content. The process of creating a tabbed area on your site is pretty simple actually as you will see while I walk you through the process. Creating The Content Area The first thing to address when setting up tabs is to actually sort out where they'll go on the page, and how they will look. This is a design choice and not actual important to the mechanics of making working tabs. For the purpose of this tutorial I will be using normal hyperlinks to navigate between tabbed areas however via simple HTML/CSS you can handle this other ways. The OnClick Event The OnClick code is was does most of the work for our tabs. For this tutorial I'm assuming just two tabs are used but you can add as many as you want this way. Clicking on the link wrapped in the <a> tag will change the display properties of corresponding <div> layers (We'll get to how it does that shortly.) <a href="#" onClick='document.getElementById("div1").style.display="block";document.getElementById("div2").style.display="none";'>Link</a> The code above executes two things when clicked. First through javascript it sets CSS display for "div1" as block (which allows it to be viewed). Second it sets CSS display for "div2" to none which causes it not to be displayed. Depending on how many tabs you have you may have to repeat this core code document.getElementById("div1").style.display="block/none"; for each tab, the OnClick of the link determining which <div> layers are set to 'block' and which to 'none' For example... <a href="#" onClick='document.getElementById("div1").style.display="block";document.getElementById("div2").style.display="none";document.getElementById("div3").style.display="none";'>Link 1</a> <a href="#" onClick='document.getElementById("div1").style.display="none";document.getElementById("div2").style.display="block";document.getElementById("div3").style.display="none";'>Link 2</a> <a href="#" onClick='document.getElementById("div1").style.display="none";document.getElementById("div2").style.display="none";document.getElementById("div3").style.display="block";'>Link 3</a> notice how each link's OnClick determines which <div> will be set to 'block' while the others are set to 'none' this determines which <div> shows when you click on the link. Now the <div> Layers Each tabbed content area will need a separate <div> layer that corresponds to one of the id's called on the OnClick (div1, div2, etc) You can obviously name these whatever you want, just make sure you reflect that in your OnClick code as well. Below you will see a sample snippit of <div> code. <div id="div1" name="div1" style="display:block;">Content</div> <div id="div2" name="div2" style="display:none;">Different Content</div> As you see you need to make sure the name/id is set to match your OnClick in the links. You also need to make sure the style is set either inline of in a css file to determine to default display. You will want your default content in the tabbed area to be set to 'block' while any other tabs that are currently not seen until clicked on are set to 'none'. You can set different css properties to each <div> as you see fit. An Example of This Code in Action Using just the code above with some actual content/css styling I created ( This ) page.