时间戳

首页 > 解决方案 > 显示访问者的按钮颜色更改在当前页面上

css - 显示访问者的按钮颜色更改在当前页面上

问题描述

我正在尝试更改侧边栏按钮的背景颜色，以让访问者知道他们当前在哪个页面上。我已经尝试在网上搜索类似的答案并将它们应用到我的代码中，但还不能让它工作。如果有帮助的话，我正在使用 WordPress、CSS 和 PHP/HTML。以下是其中一个按钮代码：

.button-goldGrey {
  color: #231f20;
  border: 1px solid #231f20;
}

.button-goldGrey:hover {
  background-color: #ccb086;
}
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>

如果您愿意，我会将这个 JSFiddle 放在一起：https ://jsfiddle.net/zerojjc/huxznj7m/2/

标签： csswordpressbutton

解决方案

正如我在对您的问题的评论中提到的那样，仅 CSS 无法做到这一点。你需要一些 PHP 来实现这一点。

假设您可以使用 PHP 并且可以编辑主题文件，WordPress 有一个名为is_page()的函数，您可以使用该函数向按钮添加新的 CSS 类。

例如：

CSS：

.button-goldGrey {
  color: #231f20;
  border: 1px solid #231f20;
}

.button-goldGrey:hover,
.button-goldGrey.current {
  background-color: #ccb086;
}

PHP：

<a class="button-side button-goldGrey<?php echo (is_page('pwa-wealth-management')) ? ' current' : ''; ?>" href="Page1">PWA Wealth Management</a>
<a class="button-side button-goldGrey<?php echo (is_page('wilder-co')) ? ' current' : ''; ?>" href="Page1">Wilder & Company CPA's</a>
<a class="button-side button-goldGrey<?php echo (is_page('the-nichols-law-group')) ? ' current' : ''; ?>" href="Page1">The Nichols Law Group</a>

推荐阅读