SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast p3nnywise's Avatar
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbed navigation and displaying content

    Hello all!

    First off, I'd like to start by saying that I'm very much a Javascript neophyte. To date, the most complicated thing I have done with it is change variables in stuff other people have written. My area of expertise is generally graphic design.

    With that being said, I do get asked to work on web projects around the shop. Right now I'm trying to find a suitable script that will allow me to use a tabbed navigation to show the content of particular divs in a shopping cart, while obfuscating the rest. For example, when someone clicks on the "Description" tab, I only want to display the content of the div that contains the description, while leaving the other two divs invisible. Clicking on the appropriate tab displays the content div associated with it.

    A great example of this is here:

    http://www.dynarch.com/products/dhtml-tabs/

    I thought that the developer license for this was a little costly compared to some scripts I have purchased in the past, and I wanted to know if any of you might have a suggestion or an alternative? If you do, I'd love to hear it. I realize that learning Javascript is probably the best option, but time isn't going to allow for that for awhile. Any help would be GREATLY appreciated. Thanks in advance!

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are quite a few tutorials available on the net for this:

    Here's the best (IMO) - Create a Slick Tabbed Content Area using CSS & jQuery
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is some validated code that I quickly ran up which performs the tabbed navigation.

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </style>
    </head>
    <body>
    <div class="tab_container">
        <ul class="tabs">
    		<li><a href="#tab1_content">Tab 1</a></li>
    		<li><a href="#tab2_content">Tab 2</a></li>
    		<li><a href="#tab3_content">Tab 3</a></li>
    	</ul>
    	<div id="tab1_content">
    		<p>Tab 1 content</p>
    	</div>
    	<div id="tab2_content">
    		<p>Tab 2 content</p>
    	</div>
    	<div id="tab3_content">
    		<p>Tab 3 content</p>
    	</div>
    </div>
    <script src="tabs.js">
    </script>
    </body>
    </html>

    Code css:
    .tab_container {
    	border: 1px solid black;
    	width: 200px;
    }
    .tabs {
    	margin: 0;
    	padding: 0;
    }
    .tabs li {
    	padding: 0.2em;
    	list-style-type: none;
    	display: inline;
    }
    .hidden {
    	display: none;
    }

    Code javascript:
    (function () {
    	function processTab(evt) {
    		evt = evt || window.event;
    		var targ = evt.target || evt.srcElement,
    			content = targ.getAttribute('href').split('#')[1],
    			els = this.parentNode.getElementsByTagName('div'),
    			elsLen = els.length,
    			i,
    			el;
    		for (i = 0; i < elsLen; i += 1) {
    			el = els[i];
    			if (el.getAttribute('id') === content) {
    				el.className = '';
    			} else {
    				el.className = 'hidden';
    			}
    		}	
    	}
    	var defaultTab = function () {
    		return '#tab1_content';
    	};
    	var els = document.getElementsByTagName('ul'),
    	    elsLen = els.length,
    		i,
    		el;
    	for (i = 0; i < elsLen; i += 1) {
    	    el = els[i];
    	    if (el.className === 'tabs') {
    			el.onclick = processTab;
    			// fake an onclick event to set the default tab
    			processTab.call(el, {
    				target: {getAttribute: defaultTab}
    			});
    		}
    	}
    })();
    Last edited by paul_wilkins; Jun 9, 2008 at 16:56.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast p3nnywise's Avatar
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both very much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •