Jump to content

Tabifier Problem Incorporating <ul> Into Code


Recommended Posts

I am referencing this site here: http://www.barelyfitz.com/projects/tabber/ to try and set up a tab content script.The site makes it seem easy. In step 1 I enter this code into my page:

<div class="tabber">  <div class="tabbertab">	<h3>Section One</h3>	Section one content.  </div>  <div class="tabbertab" title="MyTabTitle">	Section two content.  </div></div>

And get this nice looking result:screen2.gifBut when you get to step 3, he throws in the <ul> to dictate the tabs. However, when I implement his code:

<div class="tabberlive">  <ul class="tabbernav">	<li class="active">	  <a href="java script:void(null)" onclick="">	  Section One</a>	</li>	<li>	  <a href="java script:void(null)" onclick="">	  MyTabTitle</a>	</li>  </ul>  <div class="tabbertab">	<h3>Section One</h3>	Section one content.  </div>  <div class="tabbertab">	Section two content.  </div></div>

...into my page, I get a distorted look:screen1.gifI want to be able to incorporate the <ul> into my site so I can style the tabs. He provides other examples on his page, but none of them use an unordered list. Am I missing something obvious here? Thank you in advance to anyone who can offer some help and thought.

Edited by mboehler3
Link to post
Share on other sites

the onclick runs a javascript dom code, to show required content, but at the same time hiding the unwanted content.usually using display: none; to hide. and display: block; to show required content.or in this case to change the classname as listed in tabber.js file

Edited by dsonesuk
Link to post
Share on other sites
the onclick runs a javascript dom code, to show required content, but at the same time hiding the unwanted content.usually using display: none; to hide. and display: block; to show required content.or in this case to change the classname as listed in tabber.js file
Thank you for your input. So what changes do I have to make on my end?
Link to post
Share on other sites

you don't use the unordererd list code shown, this is what the original code is transformed into.you should have link to css and javascript file in page like so<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="tabber.js"></script><link href="example.css" type="text/css" rel="stylesheet" /></head><body><div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div></div></body></html> when you open this page the javascript turns the current code into (using firefox select all->right click-> View selection source) the code below, which now uses an unordered list.<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><script type="text/javascript" src="tabber.js"></script><link href="example.css" type="text/css" rel="stylesheet"></head><body><div class="tabberlive"><ul class="tabbernav"><li class="tabberactive"><a title="Section One" href="java script:void(null);">Section One</a></li><li class=""><a title="MyTabTitle" href="java script:void(null);">MyTabTitle</a></li></ul> <div title="" class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab tabbertabhide" title=""> Section two content. </div> </div></body></html>and then the example.css file styles the unordered list produced.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...