asked on

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?

LZ1

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.

jayarjo

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!

LZ1

Correction to the above.
The line specified above should actually read:
tabContainers.hide().filter(':First').show();

Kamilek0617

ASKER

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.

jayarjo

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

LZ1

Change the last line in your script:
}).filter(':Specific').click();

to }).filter(':first').click();

Kamilek0617

ASKER

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.

LZ1

Can you post your complete code?

Kamilek0617

ASKER

<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

LZ1

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.

LZ1

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

Kamilek0617

ASKER

added it. Nothing, doesn't work.

LZ1

What browser are you testing in? I tested in IE 7 & 8 and FF

Kamilek0617

ASKER

FF. Nothing. Your code that you pasted for the full page doesn't even show tabs at all.

LZ1

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

Kamilek0617

ASKER

No tabs.

LZ1

Did you have tabs prior to that? I used your exact same code, just added the waste class div. And modified the script.

Kamilek0617

ASKER

Yes. had tabs before, just always the first one selected and wanted the second one selected.

LZ1

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.

Kamilek0617

ASKER

I guess its not possible, since no one can provide a solution.

LZ1

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.

Kamilek0617

ASKER

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.

LZ1

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

Kamilek0617

ASKER

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.

LZ1

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

Kamilek0617

ASKER

OK, now how do I get the 3rd tab to be selected?

LZ1

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.

Kamilek0617

ASKER

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.

Kamilek0617

ASKER

Basically I need the tab selected to be referred to by name, not it's position relative to other tabs.

LZ1

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.

Kamilek0617

ASKER

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?

LZ1

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.

Kamilek0617

ASKER

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.

Kamilek0617

ASKER

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.

Kamilek0617

ASKER

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.

LZ1

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

LZ1

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

Kamilek0617

ASKER

It doesn't work. I understand that the Resource tab should be active, but it is not. None of them are active.

LZ1

The tab itself isn't highlighted, but the content is showing for me on the Resources tab.

Kamilek0617

ASKER

Didn't notice that, but yes, you are correct. however I would need the tab highlighted.

LZ1

Working on that.....

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kamilek0617

ASKER

Very cool. Thx.

jayarjo

You guys have spammed my mailbox.

For god sake - use jQuery UI!

LZ1

Indeed this was probably one of the longest threads I was ever apart of.

Kamilek0617

ASKER

I guess one last question. How can I make one of the tabs a link, and not an actual tab?

Kamilek0617

ASKER

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.