JQuery Custom tabs

Hi,
I have to implement a JQuery tabs interface, but to the exact style that the designer wants. The designer wants only two (flexibility preferred though) tabs Overview and specification.
I dont want to use JQuery UI tabs especially as I believe this to be fairly simple thing.
I would image it follows this sort of pattern:
1. Show the first Div in the list.
2. Click a link - grab the href of the link.
3. hide all Divs with the exception of the div whose ID matches the Href.

If possible I would also like it to replace the image behind the selected link, and ensure that the other links are of the default type...

Cheers
John


 
LVL 2
jdav357Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve KrileCommented:
Funny, I just went through an entire arc where I wanted to build my own tabs.  In short, it IS as simple as you say.  That being said, there are benefit to using pre-built solutions.  However, if you must....


<!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=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
 	body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
	ul.tabs {padding:0;margin:0;list-style-type:none;}
	ul.tabs li {float:left;padding:5px;}
	ul.tabs li a {text-decoration:none;padding:10px;outline:none;background:#ccc;color:gray;}
	ul.tabs li a.active {border:solid 1px #aaa;color:#000;}
	ul.tabs li a:hover {background:#aaa; color:#fff;}

	div.panes {clear:both;border:solid 1px gray;min-height:20px;margin:5px;width:600px;}
	div.pane {display:none;padding:5px;margin:5px;}

</style>

</head>


<body>

	<ul class="tabs">
		<li><a href="#">Tab 1</a>
		<li><a href="#">Tab 2</a>
		<li><a href="#">Tab 3</a>
	</ul>
	<div class="panes">
		<div class="pane">
			<p>Any content you like for the first tab</p>
		</div>
		<div class="pane">
			<select><option>Please choose one</option></select>
		</div>
		<div class="pane">
			<p>Some more content</p>
		</div>
	</div>

</body>

<script>

	$(document).ready(function(){
		$("ul.tabs > li").each(function(i){
			$(this).find("a:first").click(function(e){
				e.preventDefault();
				$("ul.tabs > li > a").removeClass("active");
				$(this).addClass("active")
				setTab(i);
			});
		});

		setTab(0);

	});


	function setTab(ind) {

		$("div.panes > div.pane").hide();

		$("ul.tabs > li:eq(" + ind + ") > a ").addClass("active");

		$("div.panes > div.pane:eq(" + ind + ")").show();
	}
</script>

</html>

Open in new window

0
Steve KrileCommented:
Sorry, just noticed I gave you the uncommented version.  Here is the commented version.

Also, just a basic approach here:

Put all your tabs in one list.  Put all your panes in one Div.  Then, keep them "aligned".  First <li> tab name matches the contents in the first <div class="pane"> section.  This is the part I like the least about this approach, but from a style point of view, this is the most stable approach.
<!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=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
 	body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
	ul.tabs {padding:0;margin:0;list-style-type:none;}
	ul.tabs li {float:left;padding:5px;}
	ul.tabs li a {text-decoration:none;padding:10px;outline:none;background:#ccc;color:gray;}
	ul.tabs li a.active {border:solid 1px #aaa;color:#000;}
	ul.tabs li a:hover {background:#aaa; color:#fff;}

	div.panes {clear:both;border:solid 1px gray;min-height:20px;margin:5px;width:600px;}
	div.pane {display:none;padding:5px;margin:5px;}

</style>

</head>


<body>

	<ul class="tabs">
		<li><a href="#">Tab 1</a>
		<li><a href="#">Tab 2</a>
		<li><a href="#">Tab 3</a>
	</ul>
	<div class="panes">
		<div class="pane">
			<p>Any content you like for the first tab</p>
		</div>
		<div class="pane">
			<select><option>Please choose one</option></select>
		</div>
		<div class="pane">
			<p>Some more content</p>
		</div>
	</div>

</body>

<script>

	$(document).ready(function(){
		//go through each of the li's in the "tab" list
		$("ul.tabs > li").each(function(i){

			//add a click handler to the contained anchor tag
			$(this).find("a:first").click(function(e){

				//stop the normal behavior
				e.preventDefault();

				//remove the active class for ALL tabs
				$("ul.tabs > li > a").removeClass("active");

				//do the tab container showing logic
				setTab(i);
			});
		});


		//when the page first loads, show the first tab pane
		setTab(0);

	});


	function setTab(ind) {

		//hide all pane divs
		$("div.panes > div.pane").hide();

		//add the active class to the clicked link
		$("ul.tabs > li:eq(" + ind + ") > a ").addClass("active");

		//show the matched pane (based on index of the list item)
		$("div.panes > div.pane:eq(" + ind + ")").show();
	}
</script>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jdav357Author Commented:
Its annoying, but the designer wants to do some specific things with the tabs, so I have to go with the custom version.. So thanks for your solution.

John

0
Steve KrileCommented:
I hear ya.  The thing is, take a product like jquery tools (flowplayer.org).  They have a Tab solution that's very good and cross-browser, and extensible, yada yada yada.  I still want what *I* want.
0
jdav357Author Commented:
Thats exactly the problem! There are so many nice plugins for Jquery  as well yet they still want what 'they' want!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.