Alright my friends...
I am creating a page that has some AJAX calls to load content into a div called #contentAll, the framework of the page consists of a top drop down navigation, a left bar that has the same links to the page. Everything is working great except that the links to the main pages, the ones that are currently the titles to the dropdown navigation, they are hardcoded to xxxx.html references and work fine, displaying the content across the page but when you roll over another link and select a link that is fired with AJAX it keeps the xxxx.html page listings to the left up but displays the content from another page.
How would I go about firing both at the same time, the AJAX used currently is:
$(".ajaxified").click(function(){
document.getElementById("contentAll").innerHTML = "";
$.ajax({
url: "AboutUs.html",
cache: false,
success: function(html){
$("#contentAll").append(html);
}
});
});
So you want to change the links in the navigation to something other than xxxx.html? If you just want the one that you clicked to change, you can use $(this)
to change the link, making it a different color or something to signal which page the user is now on.
$(".ajaxified").click(function(){
$(this).css("color","green");
//rest of your ajax call
#or to change the href attribute $(this).attr("href","yyyy.html");
if you want to change the title of the one clicked, you can try to figure out the titles' relationship to the link you clicked, and access that, something like
var $this = $(this);
$('.selected').removeClass('selected');
$this.parent().addClass('selected');
or if they are structured by ul and li:
var $this = $(this);
$('.selected').removeClass('selected');
$this.closest('ul').addClass('selected');
Hope this helps! Also, you can include this code before the ajax call or better yet in the success callback like it was mentioned in the comment.