?
Solved

JQuery Custom tabs

Posted on 2010-04-01
5
Medium Priority
?
312 Views
Last Modified: 2013-11-11
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


 
0
Comment
Question by:jdav357
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 29334738
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
 
LVL 16

Accepted Solution

by:
Steve Krile earned 2000 total points
ID: 29335382
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
 
LVL 2

Author Comment

by:jdav357
ID: 29342824
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
 
LVL 16

Expert Comment

by:Steve Krile
ID: 29343075
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
 
LVL 2

Author Comment

by:jdav357
ID: 29350836
Thats exactly the problem! There are so many nice plugins for Jquery  as well yet they still want what 'they' want!!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question