在 href 上添加和删除 css 类答案

【问题标题】：adding and removing css classes on href在 href 上添加和删除 css 类
【发布时间】：2023-03-14 05:41:01
【问题描述】：

我有一个带有 2 个链接的页面。页面 URL 为 example.com/all

现在页面上有 2 个链接，一个指向 example.com/all/list，另一个指向 example.com/all/map

我想要的是当用户登陆 example.com/all 时，href 链接的类需要是“当前” 当我单击示例/全部/地图时，地图链接需要具有“当前”类，并且列表/全部链接需要将其删除。

当我点击all/map后点击all/list时，当前类需要在all/list链接上并从all/map中移除

这有意义吗？

类似于切换。

【问题讨论】：

这些链接是否与原始页面分开，或者您是否在单击链接时将原始页面上的内容动态替换为新内容？

标签： php javascript css

【解决方案1】：

这可以在服务器端完成。

您需要在页面上设置当前链接。

如果你有静态 html 页面，那么可以这样做

页面：example.com/all/list

<a class="current" href="example.com/all/list"> All</a>
<a href="example.com/all/map">Map</a>

页面：example.com/all/map

<a href="example.com/all/list"> All</a>
<a class="current" href="example.com/all/map">Map</a>

我对 PHP 了解不多，但您也可以通过检查当前页面 url 在 PHP 中进行设置。

【讨论】：

【解决方案2】：

这是我在 PHP 中使用的一个助手：

<?php
function current_class_if( $condition ) {
  return $condition ? 'class="current"' : '';
}
?>

然后在页面逻辑中：

<?php
$page = 'list';
?>

<a href="example.com/all/list" <?= current_class_if($page=='list') ?>> All </a>
<a href="example.com/all/map"  <?= current_class_if($page=='map') ?>> Map </a>

【讨论】：