Change the css class of the current <nav>

Question

User-540818677 posted

I have the following <nav> inside my asp.net MVC core web application:-

<nav>
      <ul id="navigation">
                          <li class="@Html.IsSelected(actions: "Home", controllers: "Default")"><a href="/">home</a></li>
                          <li class="@Html.IsSelected(actions: "FAQ", controllers: "Default")"><a href="/home/FAQ">FAQ</a></li>
                          <li class="@Html.IsSelected(actions: "Contact", controllers: "Default")"><a href="/home/contact/">Contact</a></li>
      </ul>
</nav>

and i want to change the class for the current link, i defined the following html extension method:-

public static class HtmlHelperExtensions
    {
        public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
        {
            string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
            string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

            IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
            IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

            return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
                cssClass : String.Empty;
        }
    }

but when i click on any of the <nav> links they did not get any special effects! any advice?

Thanks

Answer 1

User-474980206 posted

so have you defined any CSS for the "selected" class? when you view source was the "selected" rendered?

 

Answer 2

User-540818677 posted

so have you defined any CSS for the "selected" class? when you view source was the "selected" rendered?

the selected is already defined inside bootstrap 4.0

Answer 3

User-474980206 posted

Only if you added it. You probably meant to use the “active” class