jQuery CSS

I am using the following on my page http://jqueryfordesigners.com/jquery-tabs/

The problem is, that sometimes I want a different tab selected than the first, depending on the tab number in the URL of the page.  How can I do that?
Kamilek0617Asked:
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.

LZ1Commented:
Find this line:
   tabContainers.hide().filter(':Second').show();
 
And replace the  (':Second'). with whatever tab you'd like.  In the example it's the <h2> tag that it's drawing from.
0
jayarjoCommented:
Just do a: jQuery('#tabsElement').tabs('select', tabNumber);

Replace #tabsElement with id of actual tabs element and tabNumber with the tab number :) That's it!
0
LZ1Commented:
Correction to the above.
The line specified above should actually read:
tabContainers.hide().filter(':First').show();
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Kamilek0617Author Commented:
Doesn't work.  I renamed my CSS from first, second, third to Specific, Universal, Unknown.  So for the actual tabs I have this

<li><a href="#Specific">Specific</a></li>  and than

  <div id="Specific">
            <p>
     specific content goes here.
            </p>
        </div>



So I set the js to this

   <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':Specific').show();
                       
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':Specific').click();
                });
        </script>

and it doesn't work.
0
jayarjoCommented:
Damn, sorry - I thought you were actually using jQuery UI Tabs widget. My code line was for it. Why would you need to use anything other, anyway? Try them out, very clean, flexible and simple:

http://jqueryui.com/demos/tabs/#method-select 
0
LZ1Commented:
Change the last line in your script:
                       }).filter(':Specific').click();
 
to                         }).filter(':first').click();
 
0
Kamilek0617Author Commented:
Tried that.  Nothing.  Always selects the first tab no matter what.  I have them in this order.  Unknown, Specific, Universal.  Which is why I put Specific in the js to see if I can somehow get it to select the second one in the row, but not working.
0
LZ1Commented:
Can you post your complete code?
0
Kamilek0617Author Commented:
<head>    
  <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':Specific').show();
                       
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>
 <link rel="stylesheet" type="text/css" href="includes/tabcontent.css" />
</head>

<body>
<li><a href="#Unknown">Unknown</a></li>  
<li><a href="#Specific">Specific</a></li>  
<li><a href="#Universal">Universal</a></li>  

  <div id="Unknown">
            <p>
     Unknowncontent goes here.
            </p>
        </div>

 <div id="Specific">
            <p>
     specific content goes here.
            </p>
        </div>

 <div id="Universal">
            <p>
     Universal content goes here.
            </p>
        </div>

</body>



the css file attached.


tabcontent.css
0
LZ1Commented:
Your missing the waste class div at the end of the file.  this will help line up the anchor with the top of the page.  I put this in and it worked.
0
LZ1Commented:
Try this:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>

<style> 
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
                H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
                DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
                TEXTAREA { width: 80%;}
                FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
                LEGEND { color: #ccc; font-size: 120%; }
                INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
                LABEL { display: block; margin-top: 10px; } 
                IMG { margin: 5px; }

                UL.tabNavigation {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                UL.tabNavigation LI {
                    display: inline;
                }

                UL.tabNavigation LI A {
                    padding: 3px 5px;
                    background-color: #f5f5f5;
                    color: #000000;
                    text-decoration: none;
                }

                UL.tabNavigation LI A.selected,
                UL.tabNavigation LI A:hover {
                    background-color: #333;
                    color: #fff;
                    padding-top: 7px;
                }
                
                UL.tabNavigation LI A:focus {
                        outline: 0;
                }

                div.tabs > div {
                        padding: 5px;
                        margin-top: 3px;
                        border: 1px solid #5f5e5e;
                }
                
                div.tabs > div h2 {
                        margin-top: 0;
                }

                #Unknown {
                    background-color: #ffffff;
                }

                #Specific {
                    background-color: #ffffff;
                }

                #Universal {
                    background-color: #ffffff;
                }
				
			
                
                .waste {
                        min-height: 1000px;
                }
    </style>
 
	<script src="http://jqueryfordesigners.com/demo/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':Specific').show();
                        
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>
</head>

<body>
<li><a href="#Unknown">Unknown</a></li>  
<li><a href="#Specific">Specific</a></li>  
<li><a href="#Universal">Universal</a></li>  

  <div id="Unknown">
            <p>
     Unknowncontent goes here.
            </p>
        </div>

 <div id="Specific">
            <p>
     specific content goes here.
            </p>
        </div>

 <div id="Universal">
            <p>
     Universal content goes here.
            </p>
        </div>
<div class="waste">  </div>
</body>
</html>
 
 
 
 
 

Open in new window

0
Kamilek0617Author Commented:
added it.  Nothing, doesn't work.
0
LZ1Commented:
What browser are you testing in?  I tested in IE 7 & 8 and FF
0
Kamilek0617Author Commented:
FF.  Nothing.  Your code that you pasted for the full page doesn't even show tabs at all.
0
LZ1Commented:
Try this.  I put your links back in.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>

 <link rel="stylesheet" type="text/css" href="includes/tabcontent.css" />

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':Specific').show();
                        
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>
</head>

<body>
<li><a href="#Unknown">Unknown</a></li>  
<li><a href="#Specific">Specific</a></li>  
<li><a href="#Universal">Universal</a></li>  

  <div id="Unknown">
            <p>
     Unknowncontent goes here.
            </p>
        </div>

 <div id="Specific">
            <p>
     specific content goes here.
            </p>
        </div>

 <div id="Universal">
            <p>
     Universal content goes here.
            </p>
        </div>
<div class="waste">  </div>
</body>
</html>

Open in new window

0
Kamilek0617Author Commented:
No tabs.
0
LZ1Commented:
Did you have tabs prior to that?  I used your exact same code, just added the waste class div. And modified the script.
0
Kamilek0617Author Commented:
Yes. had tabs before, just always the first one selected and wanted the second one selected.
0
LZ1Commented:
I couldn't find a solution with the script provided.  It kept breaking on me.
I did come across this one though: http://stilbuero.de/jquery/tabs/ 
Have you seen that script?  It has exactly what your looking for.
0
Kamilek0617Author Commented:
I guess its not possible, since no one can provide a solution.
0
LZ1Commented:
It is possible as I have done it, just not with the script you have.  You would need some modification to it.  
The script above does exactly what you need.
0
Kamilek0617Author Commented:
OK, send me the full page again.  I will try it again, but like I said, your code doesn't even show tabs at all.  
0
LZ1Commented:
This is the one from the link. Let me know
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
 
        <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
 
        <script src="http://stilbuero.de/jquery/tabs/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="http://stilbuero.de/jquery/tabs/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="http://stilbuero.de/jquery/tabs/jquery.tabs.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('#container-2').tabs(2); // second tab on

            });
        </script>
 
        <link rel="stylesheet" href="http://stilbuero.de/jquery/tabs/jquery.tabs.css" type="text/css" media="print, projection, screen">
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <style type="text/css" media="screen, projection">
 
            /* Not required for Tabs, just to make this demo look better... */
 
            body {
                font-size: 16px; /* @ EOMB */
            }
            * html body {
                font-size: 100%; /* @ IE */
            }
            body * {
                font-size: 87.5%;
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            body * * {
                font-size: 100%;
            }
            h1 {
                margin: 1em 0 0;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }
            #update {
                margin: 1.5em 0;
                border: 2px solid;
                padding: .75em;
                font-size: 16px;
            }
            #update, #update * {
                color: red;
            }
        </style>
    </head>
<body>
        <h2>Start With Custom Tab</h2>
 
<div id="container-2">
            <ul>
                <li><a href="#fragment-4"><span>Unknown</span></a></li>
                <li><a href="#fragment-5"><span>Specific</span></a></li>
                <li><a href="#fragment-6"><span>Universal</span></a></li>
            </ul>
            <div id="fragment-4">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-5">
                <p>Second tab is active:</p>
                <pre><code>$(&#039;#container&#039;).tabs(2);</code></pre>
                <p>
                    Two alternative ways to specify the active tab will overrule this argument. First a li element
                    (representing one single tab) belonging to the selected tab class, e.g. set the selected tab
                    class (default: "tabs-selected", see option selectedClass) for one of the unordered li elements
                    in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers
                    to the id of a tab container of a tab interface the corresponding tab will  be activated and both
                    the initial argument as well as an eventually declared class attribute will be overruled.
                </p>
            </div>
            <div id="fragment-6">  
<p>            	Here's more content </p>
                </div>
</div>
</body>
</html>

Open in new window

0
Kamilek0617Author Commented:
Works, but does something I can't have for this project.  it adds #fragment-4 to the URL, which I can't have.   The URL can't change on a tab change.
0
LZ1Commented:
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
 
        <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
 
 
        <script src="http://stilbuero.de/jquery/tabs_3/jquery-1.2.6.js" type="text/javascript"></script>
        <script src="http://stilbuero.de/jquery/tabs_3/ui.core.js" type="text/javascript"></script>
        <script src="http://stilbuero.de/jquery/tabs_3/ui.tabs.js" type="text/javascript"></script>
 <script type="text/javascript">
            $(function() {
                $('#container-2 > ul').tabs({ selected: 1 });
              /*  $('#container-3 > ul').tabs({ fx: { height: 'toggle' } });
                $('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });
                $('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
                $('#container-6 > ul').tabs({
                    fx: { opacity: 'toggle', duration: 'fast' },
                    select: function(ui) {
                        alert('select');
                    },
                    show: function(ui) {
                        alert('show');
                    }
                });
                $('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });
                $('#container-8 > ul').tabs();
                $('#container-9 > ul').tabs({ disabled: [2] });
                $('<p><a href="#">Remove 4th tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('remove', 3);
                    return false;
                });
                $('<p><a href="#">Insert new tab at 2nd position<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);
                    return false;
                });
                $('<p><a href="#">Append new tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('add', '#appended-tab', 'New Tab');
                    return false;
                });
                $('<p><a href="#">Disable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('disable', 2);
                    return false;
                });
                $('<p><a href="#">Enable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('enable', 2);
                    return false;
                });
                $('<p><a href="#">Select 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('select', 2);
                    return false;
                });
                $('<p><a href="#">Get selected tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    alert( $('#container-9 > ul').data('selected.tabs') );
                    return false;
                });
                $('#container-10 > ul').tabs({ selected: null, unselect: true });
                $('#container-11 > ul').tabs({ event: 'mouseover' });*/
            });
</script> 
<link rel="stylesheet" href="http://stilbuero.de/jquery/tabs_3/ui.tabs.css" type="text/css" media="print, projection, screen">
        <style type="text/css" media="screen, projection">
            /* Not required for Tabs, just to make this demo look better... */
            body, h1, h2 {
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
                padding: 0 0 .5em;
                max-width: 40em;
            }
            /*pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }*/
        </style>
    </head>
<body>
        <h2>Start With Custom Tab</h2>
 
<div id="container-2">
            <ul>
                <li><a href="#fragment-4"><span>Unknown</span></a></li>
                <li><a href="#fragment-5"><span>Specific</span></a></li>
                <li><a href="#fragment-6"><span>Universal</span></a></li>
            </ul>
            <div id="fragment-4">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-5">
                <p>Second tab is active:</p>
                <pre><code>$(&#039;#container&#039;).tabs(2);</code></pre>
                <p>
                    Two alternative ways to specify the active tab will overrule this argument. First a li element
                    (representing one single tab) belonging to the selected tab class, e.g. set the selected tab
                    class (default: "tabs-selected", see option selectedClass) for one of the unordered li elements
                    in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers
                    to the id of a tab container of a tab interface the corresponding tab will  be activated and both
                    the initial argument as well as an eventually declared class attribute will be overruled.
                </p>
            </div>
            <div id="fragment-6">  
<p>            	Here's more content in tab 3</p>
                </div>
</div>
</body>
</html>

Open in new window

0
Kamilek0617Author Commented:
OK, now how do I get the 3rd tab to be selected?
0
LZ1Commented:
In the code above, line 16
$('#container-2 > ul').tabs({ selected: 1 });

Change to:
$('#container-2 > ul').tabs({ selected: 2 });
 
The very first tab is labeled as 0 and the second tab as 1 and the next tab as 2.  So for all intents and purposes the script starts at 0 and is one behind as it relates to the number of tabs.
0
Kamilek0617Author Commented:
Ok, but than it assumes I always have 3 tabs, which is not the case.  Sometimes only one tab will be there and sometimes 2, based on the results form a query.  
0
Kamilek0617Author Commented:
Basically I need the tab selected to be referred to by name, not it's position relative to other tabs.
0
LZ1Commented:
Right.  Which is why I explained that the script starts at 0.  The tab that you need it to start at you should subtract by 1.
0
Kamilek0617Author Commented:
I don't get it.  How do I get the specific tab selected when I only have 2 tabs?  How about when I have 6 tabs?
0
LZ1Commented:
It depends on which tab you need to select.
If you have 10 tabs and you need tab 7 selected you would put the number 8 in line 16 above.  This is what you see:
1     2     3     4     5     6     7     8     9     10  
But the script sees it like this:
0     1     2     3     4     5     6     7     8     9     10      
So according to the script you need to put the number 8 in to select the 7th tab.
0
Kamilek0617Author Commented:
Its not gonna work based on how the websites are structured and how the queries are called.  I need to be able to call the tabs by name, not position.  
0
Kamilek0617Author Commented:
Unless, you can make some tabs hidden, that way the amount of tabs can be made constant and some tabs not visible at all.  But still, it would be better to call the tabs by name.
0
Kamilek0617Author Commented:
I guess i can set tabs to active or inactive.  And if inactive just add this to the <li> style="display: none" to hide the tab.
0
LZ1Commented:
That's one way.  I am currently looking for a solution, but coming up rather short.  It seems that their all numerically based on tab selection
0
LZ1Commented:
Getting there:
 

<!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>Simple Tabs with CSS &amp; jQuery</title>
<style type="text/css"> 
body {
	background: #f0f0f0;
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function() {
 
	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:'#Resources'").addClass("active").show(); //Activate first tab
	$(".tab_content:'#Resources'").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});
 
});
</script>
</head>
 
<body>
 
<div class="container">
	<h1>Simple Tabs w/ CSS &amp; jQuery</h1>
    <ul class="tabs">
        <li><a href="#Gallery">Gallery</a></li>
        <li><a href="#Submit">Submit</a></li>
        <li><a href="#Resources">Resources</a></li>
        <li><a href="#Contact">Contact</a></li>
    </ul>
    <div class="tab_container">
        <div id="Gallery" class="tab_content">
            <h2>Gallery</h2>
            <a href="http://www.designbombs.com/light/simona-munteanu/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p>
            
            <p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p>
            
            <p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p>
        </div>
        <div id="Submit" class="tab_content">
            <h2>Submit</h2>
            <a href="http://www.designbombs.com/blog/sketch-blog/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
            
            <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
            
            <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
        </div>
        <div id="Resources" class="tab_content">
            <h2>Resources</h2>
          	<a href="http://www.designbombs.com/fashion/lukas-mynus/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p>
            
            <p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p> 
            
        </div>
        <div id="Contact" class="tab_content">
            <h2>Contact</h2>
            <a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
            
            <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
            
            <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
        </div>
    </div>
</div>
<div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery">Simple Tabs w/ CSS &amp; jQuery</a> by Soh Tanaka. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</div>
 
 
</body>
</html>

Open in new window

0
Kamilek0617Author Commented:
It doesn't work.  I understand that the Resource tab should be active, but it is not.  None of them are active.
0
LZ1Commented:
The tab itself isn't highlighted, but the content is showing for me on the Resources tab.  
 
0
Kamilek0617Author Commented:
Didn't notice that, but yes, you are correct.  however I would need the tab highlighted.
0
LZ1Commented:
Working on that.....
0
LZ1Commented:
Ok, I got it.
What you'll have to do is give each tab a class with it's name. Then you can call that class using Jquery to highlight the current tab and open it's contents
I did comment.

<!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>Simple Tabs with CSS &amp; jQuery</title>
<style type="text/css"> 
body {
	background: #f0f0f0;
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li.resources").addClass("active").show(); //Activate first tab. This is also where you add the class with li.resources
	$(".tab_content:'#Resources'").show(); //Show first tab content. Add the ID of the content here
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});
 
});
</script>
</head>
 
<body>
 
<div class="container">
	<h1>Simple Tabs w/ CSS &amp; jQuery</h1>
    <ul class="tabs">
        <li class="gallery"><a href="#Gallery">Gallery</a></li>
        <li class="submit"><a href="#Submit">Submit</a></li>
        <li class="resources"><a href="#Resources">Resources</a></li>
        <li class="contact"><a href="#Contact">Contact</a></li>
    </ul>
    <div class="tab_container">
        <div id="Gallery" class="tab_content">
            <h2>Gallery</h2>
            <a href="http://www.designbombs.com/light/simona-munteanu/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p>
            
            <p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p>
            
            <p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p>
        </div>
        <div id="Submit" class="tab_content">
            <h2>Submit</h2>
            <a href="http://www.designbombs.com/blog/sketch-blog/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
            
            <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
            
            <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
        </div>
        <div id="Resources" class="tab_content">
            <h2>Resources</h2>
          	<a href="http://www.designbombs.com/fashion/lukas-mynus/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p>
            
            <p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p> 
            
        </div>
        <div id="Contact" class="tab_content">
            <h2>Contact</h2>
            <a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" alt="" /></a>
            <h3><a href="http://www.designbombs.com">www.DesignBombs.com</a></h3>
            <p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p>
            
            <p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p>
            
            <p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p>
        </div>
    </div>
</div>
<div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery">Simple Tabs w/ CSS &amp; jQuery</a> by Soh Tanaka. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</div>
 
 
</body>
</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
Kamilek0617Author Commented:
Very cool.  Thx.  
0
jayarjoCommented:
You guys have spammed my mailbox.

For god sake - use jQuery UI!
0
LZ1Commented:
Indeed this was probably one of the longest threads I was ever apart of.
0
Kamilek0617Author Commented:
I guess one last question.  How can I make one of the tabs a link, and not an actual tab?
0
Kamilek0617Author Commented:
Basically when I click on the tab, I want it to go a page, and once one that page, the tab to open.  Opening it is easy based on your help and previous code, but adding a link to the tab is the hard part.
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
CSS

From novice to tech pro — start learning today.