Question

当我们在当前页面上时，我希望按钮（月亮，行星等等）保持红色。

链接到我的网站：http://www.chooseyourtelescope.com/moon-telescope/ 在这里，＆＃34;月亮＆＃34;按钮应为红色。

以下是代码：

HTML

<a href=""><div class="top-logos"><img src="" alt="LUNE"></div></a>
<a href=""><div class="top-logos"><img src="" alt="PLANETES"></div></a>
<a href=""><div class="top-logos"><img src="" alt="CIEL PROFOND"></div></a>
<a href=""><div class="top-logos"><img src="" alt="SOLEIL"></div></a>
<a href=""><div class="top-logos"><img src="" alt="TELESCOPE POLYVALENT"></div></a>

CSS

.top-logos {
width:20%;
top:108px;
padding:5px;
position: relative;
text-align:center;
float: left;
background:#0e0e18
}

.top-logos:hover {
background:#dd0000;
}
.top-logos:active {
background:#dd0000;
}

我对Javascript一无所知，但如果你告诉我该怎么做，我就可以使用它。我也安装了JQuery。

Answer 1

您已在相应元素上拥有类current-logo。只是样式：

.current-logo div.top-logos {
  background-color: #dd0000;
}

Answer 2

看起来您已经在您的网站上设置了锚标记上的.current-logo类。

在CSS文件中，您需要做的就是

.current-logo div {
    background-color: #dd0000;
}

您需要确保.current-logo课程根据您所在的页面进行更改。

看起来您正在使用Wordpress，因此最好的方法是使用内置菜单功能。您需要在 functions.php 中注册菜单，它会根据您网站的页面自动更新。您可以阅读here。

根据您对 base.php 文件的评论，您可以在 base.php 中执行以下操作：

<a href=".../moon-telescope/" <?php if (is_page('moon-telescope')): echo 'class="current-logo"'; endif; ?> >
    <div></div>
</a>
<a href=".../planets/" <?php if (is_page('planets')): echo 'class="current-logo"'; endif; ?> >
    <div></div>
</a>

更改以匹配您的网页。

突出显示链接到当前页面的div

2 个答案: