Question 44785 in Html Question posted in
Some basic documentation can be found here.

Highlight current sidebar item – javascript – Html

I am trying to get the current sidebar item highlighted, i used this code:

<ul class="app-menu">
        <li><a class="app-menu__item" href="@Url.Action("Index","Home")">Accueil</a></li>
        <li><a class="app-menu__item" href="#">Categories</a></li>
        <li><a class="app-menu__item" href="@Url.Action("Index","Stock")">Stock</a></li>
        <li><a class="app-menu__item" href="@Url.Action("Index","Article")">Article</a></li>
</ul>

Javascript

<script>
    $(".app-menu li a").click(function () {
        $(".app-menu li a.active").removeClass("active");
        $(this).addClass("active");
    });
</script>

But this code isn’t working. what’s wrong with this?

Tags:

2

Answers


  1. 0

    Remove "…" and use ‘…‘ :

     <li><a class="app-menu__item" href="@Url.Action('Index','Home')">Accueil</a></li>
    Login or Signup to reply.
  2. 0

    Please check below code, I think there is a problem with your href link

    <html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  
  <style>
    .app-menu a.app-menu__item.active {
    font-weight:bold;
    color:#333;
    }
  </style>

</head>

<body>
<ul class="app-menu">
        <li><a class="app-menu__item" href="@Url.Action('Index','Home')">Accueil</a></li>
        <li><a class="app-menu__item" href="#">Categories</a></li>
        <li><a class="app-menu__item" href="@Url.Action('Index','Stock')">Stock</a></li>
        <li><a class="app-menu__item" href="@Url.Action('Index','Article')">Article</a></li>
</ul>

<script>
    $(".app-menu li a").click(function () {
        $(".app-menu li a.active").removeClass("active");
        $(this).addClass("active");
    });
</script>



</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search