Click here to Skip to main content
15,881,033 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
Updated 21-Jun-17 1:53am
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

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.
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900