如何保留一个元素（如 div）的当前 css 类状态？答案

【问题标题】：How to preserve the current css class state of an element such as a div?如何保留一个元素（如 div）的当前 css 类状态？
【发布时间】：2025-12-27 07:30:11
【问题描述】：

我正在尝试使用 asp.net mvc 学习和创建网站，但与使用 webforms 相比，我现在感到困惑。所以，

我有 2 个 div。

div1 包含一个无序列表，用作导航条

<ul id="navigation_list">
  <li id="navigation_items_1" class="navigation_items">@Html.ActionLink("ONE", "One")</li>
  <li id="navigation_items_2" class="navigation_items">@Html.ActionLink("TWO", "Two")</li>
  <li id="navigation_items_3" class="navigation_items">@Html.ActionLink("THREE", "Three")</li>
</ul>

div2 包含的内容取决于在 div 一中选择的导航项。

我的问题是 - 每次单击其中一个导航项时，整个页面都会重新加载，因此我对所有导航项的 css 属性的所有 jquery 操作都在 Div1 中丢失。不过，第 2 部分正确地更改了其内容。

如何在 div1 中保留当前的 css 类状态，以便当我在鼠标单击时突出显示导航项时，css 属性仍然存在？我的意思是强制只刷新 div2 或类似的东西。

在控制器中，这就是我所拥有的：

    public ActionResult Index()
    {
        return View(something.ToList());
    }

    //
    // GET: /ie/One

    public ActionResult One()
    {
        return View(something.ToList());
    }

    //
    // GET: /ie/Two

    public ActionResult Two()
    {
        return View(something.ToList());
    }

我也意识到每次页面加载时 url 都会改变。

【问题讨论】：

标签： html asp.net-mvc razor

【解决方案1】：

你需要 Ajax.Actionlink http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx 而不是 Html.ActionLink

在 AjaxOptions 参数之一 (UpdateTargetId) 中指定要替换的 div。

另外，请确保您将部分视图返回到该 div，否则您会将整个页面的标记放入其中。将您的 ActionResults 更改为 PartialViewResults 可能会有所帮助，以帮助您记住它真正在做什么。

这里有一个例子：

@Ajax.ActionLink("ONE", "One", null, new AjaxOptions { UpdateTargetId = "div2" })

【讨论】：

【解决方案2】：

如果您尝试使用 Jquery 刷新 div，则不需要 ActionLink。使用 load() 函数。并更改控制器中的 ActionResults 以返回 PartialView() 而不是 View()。

所以，在你看来：

$(function () {
$('.one').click(function(){$('.firstcontent').load('/Home/One')}):
$('.two').click(function(){$('.secondcontent').load('/Home/two')}):
$('.three').click(function(){$('.thirdcontent').load('/Home/three')}):
});

<ul id="navigation_list">
  <li id="navigation_items_1" class="navigation_items"><a href="#" class="one">one</a></li>
  <li id="navigation_items_2" class="navigation_items"><a href="#" class="two">two</a></li>
  <li id="navigation_items_3" class="navigation_items"><a href="#" class="three">three</a></li>
</ul>

<div class="firstcontent"></div>
<div class="secondcontent"></div>
<div class="thirdcontent"></div>

在你的控制器中：

public ActionResult One()
    {
        return PartialView(something.ToList());
    }

    //
    // GET: /ie/Two

    public ActionResult Two()
    {
        return PartialView(something.ToList());
    }

     public ActionResult Three()
    {
        return PartialView(something.ToList());
    }

【讨论】：