-1

Hi everyone I made a navigation for my website. I just like to change the color of my links when I go to another page. For example I click the "about" then I will go to about page I like the about link will turn to red when I am in the about page.

How can I do that? Thank you!

Here the codes

html

<nav> 
    <ul>
        <li><a href="index.htm">Home</a></li>
        <li><a href="about.htm">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Creatives For Less</a></li>
        <li><a href="#">Blogs</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS:

nav {
    float: right;
    margin-top: 13px;
    margin-right: 40px;
}

nav ul {
    font-family: josefin;
    list-style-type: none;
    font-size: 11pt;
    text-transform: uppercase;
}

nav li {
    display: inline;
    padding-left: 15px;

}

nav li a{
    text-decoration: none;
    color: #0ff;
}

nav li a:hover, a:active {
    color: #fff;
}
4

3 回答 3

2

Just have an active class, and if you're on a page, set the <li> to have that class.

For example:

<li class="active"><a href="#">Services</a></li>

And in your css style the active class:

nav li.active a{
    color: red;
}

If you're asking how you know which page you're on, though, and want to do it dynamically, you'll need to use PHP, some other server-side language or JavaScript.

于 2013-07-17T22:09:08.153 回答
0

You can add some css class with javascript or with some server-side language.

If you'll use javascript you should find something that indicates you that user is on about page (some div with information for example). And then, if you use JQuery, add this class:

$('#mylink').addClass('active');
于 2013-07-17T22:10:51.440 回答
0

Use the a:visited in your CSS.

a:visited { background-color:yellow; }

You should look into setting classes for them too and then assigning them via the css

于 2013-07-17T22:10:51.883 回答