我有搜索并尝试不同的方法，例如使用 JQuery 助手类等，但我找不到适合我的情况的解决方案。我的代码在下面，当我用户选择和页面刷新时，我想要活动 li
<aside class="main-sidebar" style="background: #102C4B none repeat scroll 0% 0%;border-right: 1px solid #DCE1E4;">
<section class="sidebar">
<div>
<ul id="menu" class="sidebar-menu">
<li class=" treeview">
<a href="#">
<i style="color:#fff" class="fa fa-dashboard"></i> <span style="color: #fff;">Dashboard</span> <i style="color:#fff" class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
@*<li class="active"><a style="color:#fff" href="~/Dashboard/Index">Dashboard</a></li>*@
@Html.MenuItem("Dashboard", "Index", "Dashboard")
</ul>
</li>
<li class="treeview">
<a href=" #">
<i style="color:#fff" class="fa fa-pie-chart"></i>
<span style="color: #fff;">Sales</span>
<i class="fa fa-angle-left pull-right" style="color:#fff"></i>
</a>
<ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
@*<li><a style="color:#fff" href="~/Sales/index"> View Sale</a></li>*@
@Html.MenuItem("View Sale", "index", "Sales")
</ul>
</li>
<li class="treeview">
<a href="#">
<i style="color:#fff" class="fa fa-laptop"></i>
<span style="color: #fff;">Invoice</span>
<i class="fa fa-angle-left pull-right" style="color:#fff"></i>
</a>
<ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
@*<li><a style="color:#fff" href="~/Invoice/Index"> View Invoice</a></li>
<li><a style="color:#fff" href="~/Invoice/Create">Add Invoice</a></li>*@
@Html.MenuItem("View Invoice", "Index", "Invoice")
@Html.MenuItem("Add Invoice", "Create", "Invoice")
</ul>
</li>
</ul>
</div>
</section>
</aside>
正在使用的帮助程序类也在下面，但我不为我工作以保持 li 打开。
using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;
public static class Utilities
{
public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
string text, string action,
string controller,
object routeValues = null,
object htmlAttributes = null)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction,
action,
StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController,
controller,
StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
if (routeValues != null)
{
li.InnerHtml = (htmlAttributes != null)
? htmlHelper.ActionLink(text,
action,
controller,
routeValues,
htmlAttributes).ToHtmlString()
: htmlHelper.ActionLink(text,
action,
controller,
routeValues).ToHtmlString();
}
else
{
li.InnerHtml = htmlHelper.ActionLink(text,
action,
controller).ToHtmlString();
}
return MvcHtmlString.Create(li.ToString());
}
}
有两件事要做，一件是在用户单击时进行活动选择，另一件是在页面刷新后保存此选择，对吗？
如果要在页面刷新后选择li，则需要将此状态保存在某个位置。您可以将其保存在客户端（Cookie 和本地存储）或服务器端（会话或其他结构）中。如果您选择客户端，您可能会发现一些跨浏览器问题，例如，某些旧浏览器没有本地存储功能，或者使用 Cookie 的安全性问题。如果您选择服务器端，则不会遇到这些问题，但您将使用更多的往返（例如保存状态）。但我认为这个缺点并不那么严重。
无论你选择什么，都会是这样的：
- 单击
li，保存需要选择的父类并应用所需的 CSS 类，并从其他li中删除相同的类。 - 在页面渲染中，检查所选父项是否较早保存，然后根据需要应用 CSS。
检查我用来测试您需要的此示例。
<aside>
<ul id="menu">
<li class="treeview">
Test 1
<ul >
<li><a id="A1" runat="server" href="#">Home1</a></li>
<li><a id="A2" runat="server" href="#">About1</a></li>
<li><a id="A3" runat="server" href="#">Contact1</a></li>
</ul>
<br />
</li>
<li class="treeview">
Test 2
<ul >
<li><a id="A4" runat="server" href="#">Home2</a></li>
<li><a id="A5" runat="server" href="#">About2</a></li>
<li><a id="A6" runat="server" href="#">Contact2</a></li>
</ul>
<br />
</li>
<li class="treeview">
Test 3
<ul >
<li><a id="A7" runat="server" href="#">Home3</a></li>
<li><a id="A8" runat="server" href="#">About3</a></li>
<li><a id="A9" runat="server" href="#">Contact3</a></li>
</ul>
</li>
</ul>
</aside>
<script>
$(document).ready(function () {
$('.treeview').find('li').each(function (i, e) {
$(this).click(function (event) {
$('.treeview').removeClass('active');
$(this).parents('li').addClass('active');
// TODO: save the index or ID of the selected element. You can do something simple, like a post to action to save the state.
});
});
// TODO: check if the index or ID of the selected element is saved somewhere, then apply the css class you want.
// You could make a get to a action to retrieve the state, but is one more roundtrip just to get the state.
// Another solution is on the server side, during the rendering, you already know the state of the selected item, so just add the class where you need it.
});
</script>