Question

我有像这样的代码示例

<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>

我需要在一个链接中使用MVC中的ActionLink，你可以看到我有一个class =“active”我需要点击那个会有那个类，我最好的办法是什么？

全部谢谢

Answer 1

＆＃13;

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

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用onclick这样的属性：

替换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 = "" })

添加setActive javascript函数：

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

在asp.net mvc中创建ActionLink和活动链接

2 个答案: