code for highlighting current page with CSS not working on IE_问答_开发者

code for highlighting current page with CSS not working on IE

开发者 https://www.devze.com 2023-01-20 22:01 出处：网络

the following code for highlighting current page works fine in FF but no luck with IE. Is there an known hack? I\'ve googled a bit but couldn\'t find anything.

the following code for highlighting current page works fine in FF but no luck with IE.

Is there an known hack? I've googled a bit but couldn't find anything.

.navigation a:link {color: #FFFF00; text-decoration:none;}
.navigation a:visited {color:#000000; text-decoration:none}
.navigation a:hover {color:#c1753e; text-decoration:none}  
.navigation a:active {color:#000000; text-decoration:none;} 

body#homepage a#home,
body#gallery a#gallery,
body#biography a#biography,
body#exhibitions a#exhibitions,
body#contact #acontact
{
color: #000000;
}

corresponding HTML:

<body id="homepage">

        <ul>
        <li><a href="index.html" id="home">Home</a></li>
        <li><a href="gallery.html" id="gallery">Gallery</a></li>
        <li><a href="biography.html" id="biography">About the a开发者_如何学Pythonrtist</a></li>
        <li><a href="exhibitions.html" id="exhibitions">Exhibitions</a></li>
        <li><a href="contact.html" id="contact">Contact</a></li>
        </ul>

...

There are several problems:

You can't have two elements with the same id in a document, so most of your selectors will never match anything in a valid HTML document (and invalid documents invite error recovery in different ways by different browsers)
The current link and all :visited links are black, so how would you tell the difference?
#acontact should be a#contact (except for the duplicate ID issue mentioned above)

could it be this selector?:

.navigation a:link {color: #FFFF00; text-decoration:none;}

Honestly, I never used it. If you simply have static pages, best approach is to add a class .current to the page you're on and you're done.

You'd do something like this:

body.homepage a.homepage {
    color:red;
}

For each of those links in your navigation.

That said, I'd append a "active" class via server-side code to the currently active link element's class name instead -> less verbose CSS.

You don't have anything with a navigation class so the selectors at the top are not contributing anything to the page style and you are duplicating IDs. Either change the IDs to classes or rename the IDs on the body to something else like gallerypage, biographypage, etc.

Given that you are specifically calling out IE, you may find you have difficulty if you are changing the id of the body tag on the body tag at runtime with Javascript. IE can have difficulty recognizing style changes to child elements when you change the class on a parent element. Changing something about the child elements will force IE to recognize the change. You could, for instance add, a dummy class to all the elements that would be affected.

If you are going that far then you might want to just add a .current style and add the class to the relevant link. Of course you will need to remove the current class from all the other navigation links.

You also might want to change the style to something more obvious, like turning on a border, to aid in debugging since there are other problems with your styles and just turning the colour black is likely to be unnoticeable (especially if you get your .navigation rules to work).

A technique like this should definitely work in all browsers. However, as you've already been told, you can't have the same ID twice in the same page.

The way around this is simple: Just use similar IDs on the body and menus, rather than identical ones. There's nothing in the technique that requires the IDs to be identical.