SquareSpace

Question

我在解决这个问题时遇到了一些问题。

我想在页面的特定 URL 上将顶部导航栏菜单中的图像更改为不同的图像。

例子;-

首页 - 流程 - 图库 - 联系方式

^ 点击 "PROCESS" 会进入 /process 页面 ^

我想得到它，所以 "PROCESS" 图像从黑色变为灰色，而所有其他图像保持黑色，这基本上会向最终用户显示他们当前所在的页面 -> "PROCESS"

我当前的站点：https://alex-vreal.squarespace.com/

这可能很简单，但解决起来很费劲。

请告诉我如何解决这个问题以及你们需要我做什么。

Answer 1

你为什么不直接更改代码中的图像 URL？

否则，有很多解决方案，使用 JS，或 css，甚至 php，但你需要更具体地说明你想做什么。

Answer 2

您可以使用 opacity。

您可以创建一个函数，在您更改网站页面时将名为 active 的 class 添加到 li 标记。那么activeclass就会有一个小的css.

检查下面的这个例子，告诉我它是否有帮助

$(document).ready(function() {
  $('.main-nav li a').click(function(e) {

    $('.main-nav li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
  });
});

.active {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-nav dropdown-hover">
  <ul data-content-field="navigation">
    <li class=" external-link active">
      <a href="#"><img src="http://i.imgur.com/vyvR99Q.png" width="67" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/0V4d6mS.png" width="98" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/Rb64lhm.png" width="96" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/qoHh0d8.png" width="102" height="25"></a>
    </li>
  </ul>
</nav>

Answer 3

如果您在列表项 li 中有 HOME、PROCESS、GALLERY、CONTACT，则使用，

li:active {背景图片: url(grey.jpg);}

SquareSpace - 如何在链接时更改导航栏中的图像 URL

SquareSpace - How to change image in navigation bar when on it's linked URL

html

css

nav

navigationbar