Active navigation menu not working.?

Question

1.00/5 (1 vote)

See more:

Hi,

I created menu using ul li element but on click which menu item clicked that item should be in red color.
its working without 'a' tag. but with a tag on page redirect its color is not showing .

how to do this with a tag? Please help me.

What I have tried:

HTML

<ul class="nav">
     <li class="LogoStyle">
         <a href=@Url.Action("Index", "Home")>
            <p>Analog Dashboard</p>
         </a>
     </li>
	<li>
         <a href=@Url.Action("Index", "Home")>
            <p>Digital Dashboard</p>
         </a>
     </li>
     <li>
         <a href=@Url.Action("Index", "Home")>
            <p>Report</p>
         </a>
     </li>
     <li>
         <a href=@Url.Action("Index", "Home")>
            <p>Signal</p>
         </a>
     </li>
</ul>

JavaScript

$(document).ready(function () {
        var selector = '.nav li';
        $(selector).on('click', function () {
            $(selector).removeClass('LogoStyle');
            $(this).addClass('LogoStyle');
        });
    });

.LogoStyle {
    color: red;
    font-weight: 500;
}

Posted 21-Jun-17 0:51am

Member 11859517

Updated 21-Jun-17 1:53am

Add a Solution

Comments

F-ES Sitecore 21-Jun-17 7:06am

Your code is changing the colour but then the browser is taking you to the new page so the html is refreshed from new...your updated html with the class change has been discarded.

Rather than change the class when the link is clicked, you have to update the link when the page loads. You'll need some way of knowing which link should be active for a given scenario.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Answer 1 · 2017-06-21T01:53:00

Solution 1

F-ES is right in the comments. Your a tag causes a new page to load so the html is all new. I suppose you have the same ul on each page? Hopefully it is in a user control but you'll need to add some JS to each page to mark the corresponding menu item as active.

Posted 21-Jun-17 1:53am

ZurdoDev

Comments

Member 11859517 21-Jun-17 8:07am

actual I am using mvc, menu is in shared layout page.
that are available for all othe view.

Member 11859517 21-Jun-17 8:11am

Hopefully it is in a user control but you'll need to add some JS to each page to mark the corresponding menu item as active.

do you have some idea what JS i have to add on each page.

ZurdoDev 21-Jun-17 8:18am

One that determines what the url is and finds the matching menu item.

Member 11859517 21-Jun-17 8:30am

Thanks RyanDev,
do u have any example, or reference, so i cant get it very clearly.

ZurdoDev 21-Jun-17 8:31am

No. Just google how to get page name from JS. Then you'll have to match that with a jquery selector. It won't be hard.