locked
Change the css class of the current <nav> RRS feed

  • 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

    Thursday, June 18, 2020 5:47 PM

All replies

  • User-474980206 posted

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

     

    Thursday, June 18, 2020 6:35 PM
  • 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

    Thursday, June 18, 2020 7:52 PM
  • User-474980206 posted

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

    Friday, June 19, 2020 12:43 AM