Create ActionLink and active link in asp.net mvc

Question

I have code sample like this

<div class="col-md-2 col-sm-3 col-xs-12 fill">
<div class="nav-highlight fill">
    <ul class="list-group">
        <li class="list-group-item borderless active">
            <a class="" href="#login"><i class="fa fa-share-square-o" aria-hidden="true"></i>Login</a>
        </li>
        <li class="list-group-item borderless">
            <a class="" href="#register"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Sign Up</a>
        </li>
    </ul>
</div>

I need to use ActionLink in MVC from a link and you can see i have class="active" i need when click on that will have that class,what i the best way to do?

Thanks all

You can look into below post http://stackoverflow.com/questions/20410623/how-to-add-active-class-to-html-actionlink-in-asp-net-mvc — Deepak Joshi, Oct 12 '16 at 05:43

score 0 · Answer 1 · answered Oct 12 '16 at 05:57

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

body{
  font-sze:14px;
}

.container{
 max-width:960px;
  margin:0 auto;
}
nav ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
nav ul li a{
  text-decoration:none;
  color:#000;
  background-color:#ccc;
  padding:4px 5px;
}
.active{
  background-color:#333;
  color:#fff;

}

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
<body>
  <div class="container">
     <nav>
       <ul>
        <li><a class="menu active" href="#">Menu1 </a></li>
        <li><a class="menu" href="#">Menu2</a></li>
        <li><a class="menu" href="#">Menu3</a></li>
        <li><a class="menu" href="#">Menu4</a></li>          
        <li><a class="menu" href="#">Menu5</a></li>
       </ul>
    </nav>
  </div>
</body>

score 0 · Answer 2 · answered Oct 12 '16 at 07:31

You can use onclick attribute like this:

Replace a tags:

@Html.ActionLink("Login", "Your Action", null, new { onclick = "setActive(this);", @class = "" })

@Html.ActionLink("Sign Up", "Your Action", null, new { onclick = "setActive(this);", @class = "" })

Add setActive javascript function:

<script>
    function setActive(element) {
        element.parentElement.className = "list-group-item borderless active";
    }
</script>

Create ActionLink and active link in asp.net mvc

2 Answers2