mboehler3 Posted August 13, 2009 Report Share Posted August 13, 2009 (edited) 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:But 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:I 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 August 13, 2009 by mboehler3 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2009 Report Share Posted August 13, 2009 (edited) 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 August 13, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
mboehler3 Posted August 13, 2009 Author Report Share Posted August 13, 2009 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 fileThank you for your input. So what changes do I have to make on my end? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2009 Report Share Posted August 13, 2009 (edited) 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 August 13, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now