jquery - How To Change Color of Current Page Link - HTMLCSSJavaScript

I'm trying to follow this example.

I've loaded this script:

<script>

// current page highlight
    $(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
            }
        });
    });

</script>

Into the <head> section for these files: index.html (the home page), about.html, and store.html

For this site. Services won't ever need to be highlighted, and Blog and My Account are currently dead links.

Then I added the corresponding class to my CSS:

.active {
color:#337ab7;
}

So when we're on Home (index.html), the Home link should be #337ab7, when we're on About (about.html), the About link should be #337ab7, and when we're on Store (store.html), the store link should be #337ab7.

But right now, still no result. What do I need to change about the JavaScript, CSS, or HTML to make this function apply?

Here's the HTML for the Nav Menu in question:

EDIT: Added active class to the links in question:

<nav class="navbar navbar-default">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div>
            <a class="navbar-brand" href="/">
            <img src="assets/images/gatewaylogo.png">
            </a>
        </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li><a href=".html" class="active">Home <span
                    class="sr-only">(current)</span></a></li>
            <li><a href=".html" class="active">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">
                    Services
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href=".html">Website Design</a></li>
                    <li><a href=".html">Graphic Design</a></li>
                    <li><a href=".html">Promotional Products</a></li>
                    <li><a href=".html">Search Engine Marketing</a></li>
                    <li><a href=".html">WordPress Conversion</a></li>
                </ul>
            </li>
            <li><a href="/store.html" class="active">Store</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">My Account</a></li>
        </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

And again here is the link for the live site. Thank you.

I'm trying to follow this example.

I've loaded this script:

<script>

// current page highlight
    $(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
            }
        });
    });

</script>

Into the <head> section for these files: index.html (the home page), about.html, and store.html

For this site. Services won't ever need to be highlighted, and Blog and My Account are currently dead links.

Then I added the corresponding class to my CSS:

.active {
color:#337ab7;
}

But right now, still no result. What do I need to change about the JavaScript, CSS, or HTML to make this function apply?

Here's the HTML for the Nav Menu in question:

EDIT: Added active class to the links in question:

<nav class="navbar navbar-default">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div>
            <a class="navbar-brand" href="http://nowordpress.gatewaywebdesign./">
            <img src="assets/images/gatewaylogo.png">
            </a>
        </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="http://nowordpress.gatewaywebdesign./index.html" class="active">Home <span
                    class="sr-only">(current)</span></a></li>
            <li><a href="http://nowordpress.gatewaywebdesign./about.html" class="active">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">
                    Services
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="http://nowordpress.gatewaywebdesign./website-design.html">Website Design</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign./graphic-design.html">Graphic Design</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign./promotional-products.html">Promotional Products</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign./search-engine-marketing.html">Search Engine Marketing</a></li>
                    <li><a href="http://nowordpress.gatewaywebdesign./wordpress-conversion.html">WordPress Conversion</a></li>
                </ul>
            </li>
            <li><a href="/store.html" class="active">Store</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">My Account</a></li>
        </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

And again here is the link for the live site. Thank you.

Share Improve this question edited May 24, 2017 at 15:01 asked May 24, 2017 at 14:47 Chameleon 991 silver badge9 bronze badges

1 $(this).addClass("active"); you have no .active class in CSS - did you mean $(this).addClass("current-link"); – Jaromanda X Commented May 24, 2017 at 14:50
1 You could use CSS :target selector? – evolutionxbox Commented May 24, 2017 at 14:50
if the url of that link is exactly the same as the one you are currently visiting you should go with :target and only in the edge case that they differ use something like .active as pseudo target – GottZ Commented May 24, 2017 at 14:51
@JaromandaX sorry I changed "current-link" to "active" in the CSS above. It's .active in my code. – Chameleon Commented May 24, 2017 at 14:52
1 Check your console. For some reason, you're not applying class active to any alement. – apires Commented May 24, 2017 at 14:52

| Show 11 more ments

4 Answers 4

Sorted by: Reset to default 2

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./index.html">
Home <span class="sr-only">(current)</span></a></li>

To hide the (current) label with Bootstrap.

Your .active class style is being overwritten by the class .navbar-default .navbar-nav > li > a.

You need to change the CSS selector, being more specific, from just .active to .navbar-default .navbar-nav > li > a .active.

About adding class active only to current accessed href. Try this:

$('ul.nav > li > a').each(function(){
   var url = window.location.href; //if paring with full URL
   //var url = window.location.href.pathname; //if paring with page name (ex. /about.html)
   var href = $(this).prop('href');

   if (url == href) {
     $(this).addClass('active');
   }
});

Or, as @Mohamed-Yousef answered, you can just write:

$("a[href*='"+ window.location.href +"']").addClass('active');

If you're always paring full URL to full Href URL.

No need to use .each() you can just use a selector for this

<script>
// current page highlight
    $(document).ready(function() {
       $("a[href*='"+ window.location.href +"']").addClass('active');
    });
</script>

And if you need to know how a[href*='"+ window.location.href +"'] selector work it simply mean find a tag with href contains window.location.href if you change your href a to something like <a href="/website-design.html"> this selctor won't work .. if this is the case you need to use .each() and .indexOf()

<script>
// current page highlight
    $(document).ready(function() {
       $('a[href]:not([href=#])').each(function(){
            if(window.location.href.indexOf($(this).attr('href')) > -1){
               $(this).addClass('active');
            }
       });
    });
</script>

about.html:19 Uncaught SyntaxError: Invalid or unexpected token

there is some weird unicode in line 19 that is throwing a parser error. You can see it in chrome's inspector in the "foreach".

Cleaning that up might fix it.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744343293a4569534.html

jquery - How To Change Color of Current Page Link - HTMLCSSJavaScript - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - How To Change Color of Current Page Link - HTMLCSSJavaScript - Stack Overflow

4 Answers 4

相关推荐