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

Question

我正在尝试更改侧边栏按钮的背景颜色，让访问者知道他们当前所在的页面。我试过在网上搜索类似的答案并将它们应用到我的代码中，但仍然无法正常工作。如果有帮助，我正在使用 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/

Answer 1

正如我在对您的问题发表评论时提到的，单靠 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>