jQuery content slider with RELATIVE links
I have a previously working website that uses a small jQuery script to trigger an image with the class content slide to animate when rolled over and show a div containing content when clicked and hide in when clicked again etc., this worked f开发者_如何学JAVAine in my main pages (example: index.html
) but does not work on my subdirectory pages (example: subdir/code/howcssworks.html
), and I'm assuming it's due to the relative link paths no longer working.
Here is the jQuery script.
$(document).ready(function() {
var slideState = "closed";
$('div.content').hide();
$('img.contentslide').click(function() {
$('div.content').toggle(1500,function() {
if (jQuery.browser.msie) { // Lines 15-17 = special treatment for IE, because of
this.style.removeAttribute('filter'); // lack of support for ClearType font rendering on items
} // being toggled in jQuery.
});
if (slideState == 'closed') {
$('img.contentslide').attr('src','images/website/hidecontentstd.png');
slideState = "open";
} else {
$('img.contentslide').attr('src','images/website/showcontentstd.png');
slideState = "closed";
}
});
$('img.contentslide').hover( function() {
if (slideState == 'closed') {
$( this ).attr('src','images/website/showcontenthvr.png');
} else {
$( this ).attr('src','images/website/hidecontenthvr.png');
}
},
function() {
if (slideState == 'open') {
$( this ).attr('src','images/website/hidecontentstd.png');
} else {
$( this ).attr('src','images/website/showcontentstd.png');
}
}
);
return false; // If JS is disabled - show extra content automatically
});
My question is: how can I change the relative linking paths in the jQuery script so it works correctly for both the main pages and the subpages of my website?
Instead of a link like this:
images/website/hidecontentstd.png
You need this:
/images/website/hidecontentstd.png
That assumes that your images
folder is at yoursite.com/images
精彩评论