anywayz was asking what does the script jquery dot js do. I noticed that the toggling will not work without it.

1). the class tabnav on seems to work even if i dont declare it in my css. how is this possible.

2). what does this script do:

i noticed that the toggling will not work without that.

1). the class tabnav on seems to work even if i dont declare it in my css. how is this possible.

2). what does this script do:
i noticed that the toggling will not work without that.

$(this).parent().parent().children(‘.current’).removeClass(‘current’);
$(this).addClass(‘current’);

i changed the above to:

$(this).parent().parent().children(‘#current’).removeid(‘current’);
$(this).addid(‘current’);

but the moment i make those changes nothing seems to work.

$(‘ul.tabNav :not(#nav_home) a’).click(function()

Space before :not and after the ending parentheses.

So when I click tab 1 I want it to go to the URL listed. When I click tab 2 I want it to change the page content as normal.

Anyway to do this?

how to post a code here?

thanx and sorry again…

You could try scrolling the window to the top of the tabs using a plugin.

I’ve tried to implement it myself and have it all working but due to having three tabbed navs on one page I’m having trouble with one thing. The example is here: http://dev.creativelogic.org/aboutus/the-team

What is happening is on the bottom tab in particular when you click a link the page jumps back to the top of the first tabbed nav. I thought it was a simple thing such as the anchor links causing it but no matter what I did to the links in the tabs in that section it always went back to the top. Is it something in the javascript I need to alter then? Thanks in advance!

In regards to your other question, anything is possible. You will just need to create that functionality. You’ve got divs to do whatever you want with.

For example, tab 2 has a list of links to the left, and when the user clicks a link, it will display the content.
This also includes say having a search input box on the page and the user can search a sql db and display the records beside the menu in say tab 2.

I’m hoping this is possible, because if so, this is the ultimate script for what I need.

Any/all responses would be greatly appreciated.
Cheers :)

So, ideally, http://www.penguinsanity.com/test/practices/test2.html?tab=2 would open up tab 2 on load. It seems to work perfectly on your version. Is there something in the back end that’s making this work?

I can’t get it to work with javascript enabled. The server this is ultimately going on to doesn’t have a php backend, so I’m not able to use your other method.

Thanks for getting back to me!

How are you able to have distinct links recognize the corresponding tab. I love how yours work by just appending ?tab=3 to the url and I’m doing the same thing on mine and it doesn’t respond. I noticed your php code, but that doesn’t seem to be helping either.

Would love some help if you’re available!

Use show/hide instead of the slides and fades. The issue seems to occur when you hover over a new tab before the last one has completed.

Another thing to try is to put some clode in that will hide all the content tabs. No fade, just immediately set visibility to false.

it’s a work in progress. The bug appears when you run your cursor over all the services links.

I’d appreciate it very much if someone could help me solve this problem

$(this).addClass('selected');


then the whole thing does not work! The container does not change.

I really need to find a solution to this. Please?

$('ul.tabNav a').click(function() {
	var curChildIndex = $(this).parent().prevAll().length + 1;
	$(this).parent().parent().children('.current').removeClass('current');
	$(this).parent().addClass('current');
	if ($(this).parent().parent().next('.tabContainer').children('div:nth-child('+curChildIndex+')').is(':hidden')){
		$(this).parent().parent().next('.tabContainer').children('.current').hide(100,function() {
			$(this).removeClass('current');
			$(this).parent().children('div:nth-child('+curChildIndex+')').show(100,function() {
				$(this).addClass('current');
			});
		});
	}
	return false;
});

So this is what I have

$(function(){
	$('.tabNav a').hover(function() {
		var curChildIndex = $(this).parent().prevAll().length + 1;
		$(this).parent().siblings('.selected').removeClass('selected');
		$(this).parent().addClass('selected');
		$(this).parent().parent().next('.tabContainer').children('.selected').fadeOut('fast',function()  {
			$(this).removeClass('selected');
			$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
				$(this).addClass('selected');
			});
		});

	});

});

What you suggested did not work :(
Any other help?