Highlighting the Current Page in a List of Links Using CSS/Html

how to highlight currently opened page link in css

The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.

for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.

the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,

   .highlighted{

       background-color:#000;

       color:#fff;

    }

highlight the navigation menu for the current page

You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...

That probably didn't make much sense, so here's an example:

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

In the page1.html, you would set the id of the body to: id="page1".

Finally in your CSS you have something like the following:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.

It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.

HTML + CSS navigation bar highlighting current page

you have to use JavaScript or jQuery to do this

example

CSS

<style type="text/css">
ul.navigation
{
    background:#fff;
}
ul.navigation li a
{
    text-decoration:none;
}
ul.navigation li a.on
{
    background:yellow;
    padding:2px 6px;
}
</style>

<script type="text/javascript">
$(function(){
    var $page = jQuery.url.attr("file");
    $('ul.navigation li a').each(function(){
        var $href = $(this).attr('href');
        if ( ($href == $page) || ($href == '') ) {
            $(this).addClass('on');
        } else {
            $(this).removeClass('on');
        }
    });
});
</script>

HTML

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="solutions.html">Solutions</a></li>
    <li><a href="contact.html">Contact</a></li>

demo is here
http://www.kevinleary.net/wp-samples/jquery-current-navigation/solutions.html

for more information

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

i hope this will help

thanks

How do I highlight a link based on the current page?

It's a server-side thing -- when rendering the page, add a class like "current-page" to the link. Then you can style it separately from the other links.

For example, StackOverflow renders the links with class="youarehere" when it points to the page you're already on.

How to highlight active page on website with html and css

for active page add some css in your stylesheet like

.active-page{
   background-color:red;
   border-bottom:1px solid white;
}

Highlighting the link that I am currently on

If you are referring to how you could highlight a link based on that page you are suppose to be on then you could simply give is a class like this:

<a class="page current" href="homepage.html">HOMEPAGE</a>|

.current {
  background-color: red;
}

You would simply change which a has the current class for each page.

How To Change Color of Current Page Link - HTML / CSS / JavaScript

SOLUTION

For example, the store page:

HTML:

<li><a class="active" href="/store.html">Store</a></li>

CSS: (.navbar-default .navbar-nav > li > a was overriding the .active class, as mentioned by doutriforce)

.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}

.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}

JavaScript:

// current page highlight

   // link color code starts
    $(document).ready(function () {
        console.log("current page", window.location.href);
        $("[href]").each(function () {
            $('a[href]:not([href=#])').each(function () {

                if (window.location.href.indexOf($(this).attr('href')) > -1) {
                    console.log($(this).attr('href') +" is active ");
                    $(this).addClass('active');
                }
                else {
                    console.log($(this).attr('href') + "is not active ");
                }
            });
        });
    });
    // link color code ends

Then be sure to change which <a> link gets the active class based on which page is the active page in your file - i.e. if you're editing login.html, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a class="active" href="/login.html">Login</a></li>

If you're editing blog.php, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li><a href="/login.html">Login</a></li>

And so on.

Finally, in index.html (the home page), be sure to add a span with class sr-only after the link text, like this:

<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>

To hide the (current) label with Bootstrap.