Is there a CSS or Javascript solution to change the background image of the current page’s navigation tab?

Is there a way using JavaScript to write a conditional piece of code that checks if 开发者_StackOverflow中文版you are on a certain url or id, and if you are, loads an "on" background image for a a certain tab?

Is their an easier way to do this without using JavaScript?

Thanks.

---

Yes, there is. I'll split this answer into two parts to try and address both of the (implied) questions; albeit I'd like to see some actual mark-up before I address the JavaScript possibility.

---

CSS id-based conditional background changes, I'm assuming that the id is on the body tag, but that assumption isn't explicit in the code, so as long as it's an ancestor of the element with the relevant id this same approach will work:

#homePageId #tabToGoToHomePage {
    background-image: url('path/to/homePageImage.png');
}

#siteMapPageId #tabToGoToSiteMapPage {
    background-image: url('path/to/siteMapPageImage.png');
}

#contactPageId #tabToGoToContactPage {
    background-image: url('path/to/contactPageImage.png');
}

/* ...and so on... */

If there are multiple elements that represent a link to a particular page, you can (obviously, I suppose) use a class-name for those elements and in the CSS selector.

---

URL-based conditional background changes are a little more dependant on your html structure, though. Posting your mark-up would be a help.

The following is based on the following mark-up, and without seeing yours I'm unable to provide anything more specific. It should be adaptable to your circumstances though:

HTML:

<ul><!-- primary navigation -->
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li>
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li>
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li>
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li>
</ul>
<!-- other content -->
<ul><!-- secondary navigation -->
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li>
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li>
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li>
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li>
</ul>

JavaScript:

var tabs = document.getElementsByClassName('navigation');
var url = 'http://www.example.com/about/';
// in real life use something like:
// var url = document.location;

if (url.charAt(url.length-1) == '/') {
    url = url.substr(0,url.length - 1);
    // I'm assuming that the pages are all in their own directories,
    // this gets rid of any trailing '/' characters
}
var curPage = url.split('/').pop().toLowerCase();

for (i=0; i<tabs.length; i++){
    if (tabs[i].getAttribute('data-link').toLowerCase() == curPage){
        tabs[i].style.backgroundColor = 'red';
        /* or:
        tabs[i].style.backgroundImage = 'url("http://path/to/image.png")';
        */
    }
}

JS Fiddle demo.

---

Check out JQuery UI tabs It allows quite a bit of customization and events that could be useful. Like the load event which is "triggered after the content of a remote tab has been loaded." You could then swap out an image placed on the tab.