Jump to content

Updateable content region


Recommended Posts

Hi, I'm trying to make a content region that updates when a link is clicked from a menu. The old content will fade out and the new content will fade in. The code I have (adapted from a book I have) is as follows:

$(document).ready(function(){$("#Tes2, #Tes3, #Tes4, #Tes5").hide().addClass("hidden");$("#Tes1").addClass("visible"); $("#clients ul").click(function(event){  target = $(event.target);  /*target.addClass("bold");   if(target.hasClass("bold")){   .removeClass("bold")   .addClass("txtNorm")  }*/  if (target.is("a")){   event.preventDefault();   if( $(target.attr("href")).hasClass("hidden") ){	$(".visible").removeClass("visible")	 .addClass("hidden")	 .fadeOut(1000);	$(target.attr("href"))	 .removeClass("hidden")	 .addClass("visible")	 .fadeIn(1000);   };  };});});

I'm having a few problems.

  1. Once you have navigated off of the first link (#Tes1) then you can't navigate back to it again.
  2. I'd like to add a bold text class to the link that is currently being viewed. The first line of the commented out code does this fine, but it adds it to every other link that is clicked too. I only want the current one. The code underneath this I thought would check for the bold class then remove it, but that doesn't work. Any suggestions really appreciated!

Thank you!

Edited by afish674
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...