CSS 如何在ASP.NET MVC中视觉上指示当前页面

在本文中，我们将介绍如何使用CSS在ASP.NET MVC中视觉上指示当前页面。在Web应用程序中，为了提供良好的用户体验，通常需要以某种方式突出显示用户当前所在的页面。通过使用CSS和ASP.NET MVC的结合，我们可以轻松实现这一目标。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

为当前页面添加类名

一种常见的做法是为当前所在的页面添加类名，然后通过这个类名来样式化当前页面的链接或导航项。我们可以通过在具体的视图文件中设置一个全局变量或者使用一些服务器端代码来确定当前页面，并将这个信息传递给HTML标记。例如，在ASP.NET MVC中，我们可以通过ViewBag或Model将当前页面的信息传递给视图。

下面是一个示例，展示了如何在ASP.NET MVC中使用CSS为当前页面添加类名：

<ul class="navigation">
  <li class="@(ViewBag.CurrentPage == "Home" ? "current" : "")"><a href="/">Home</a></li>
  <li class="@(ViewBag.CurrentPage == "About" ? "current" : "")"><a href="/About">About</a></li>
  <li class="@(ViewBag.CurrentPage == "Contact" ? "current" : "")"><a href="/Contact">Contact</a></li>
</ul>

在这个示例中，我们使用了一个navigation类来样式化导航菜单，并在每个导航项上根据当前页面是否为该项来添加current类。如果ViewBag.CurrentPage的值与当前页面匹配，那么该导航项将会突出显示。

使用CSS伪类选择器

除了为当前页面添加类名之外，我们还可以使用CSS伪类选择器来直接选择当前页面的链接或导航项，并为其添加特定的样式。在ASP.NET MVC中，这可以通过为当前页面的链接或导航项设置一个唯一的ID或类名，然后使用CSS伪类选择器来选择这些元素。

下面是一个示例，展示了如何使用CSS伪类选择器为当前页面的链接添加特定的样式：

<ul class="navigation">
  <li><a id="homeLink" href="/">Home</a></li>
  <li><a id="aboutLink" href="/About">About</a></li>
  <li><a id="contactLink" href="/Contact">Contact</a></li>
</ul>

.navigation a:active,
.navigation a:focus,
.navigation a:hover,
.navigation a.current {
  /* 添加你想要的特定样式 */
}

在这个示例中，我们为每个链接设置了一个唯一的ID，并使用CSS伪类选择器为这些链接添加特定的样式。在CSS代码中，我们选择了a:active、a:focus、a:hover和a.current，这些选择器将被应用于当前页面的链接。

使用JavaScript添加样式

除了以上的方法，我们还可以使用JavaScript来为当前页面的链接或导航项添加样式。通过在页面加载时使用JavaScript来判断当前页面并添加相应的样式，我们能够更灵活地控制当前页面的视觉效果。

下面是一个示例，展示了如何使用JavaScript为当前页面的链接添加样式：

<ul class="navigation">
  <li><a href="/" onclick="setActive('homeLink')">Home</a></li>
  <li><a href="/About" onclick="setActive('aboutLink')">About</a></li>
  <li><a href="/Contact" onclick="setActive('contactLink')">Contact</a></li>
</ul>

<script>
  function setActive(linkId) {
    var links = document.querySelectorAll('.navigation a');
    links.forEach(function(link) {
      link.classList.remove('current');
    });

    var currentLink = document.getElementById(linkId);
    currentLink.classList.add('current');
  }
</script>

在这个示例中，我们给每个链接添加了一个onclick事件，当用户点击链接时，JavaScript函数setActive将被调用。在这个函数中，我们首先移除了所有链接上的current类，然后为当前链接添加current类，从而实现了当前页面的视觉突出效果。