Javascript 在导航 Squarespace 中重新分配链接

Question

我在 Squarespace 做了一个双语网站。我不处于开发人员模式，因此对代码的访问权限有限。我可以在页眉或页面中插入 javascript/HTMl/CSS，并使用它来覆盖多个方面，例如更改页眉中的公司 Logo ，并使用 JS 将其指向备用 URL。

我想做的是在我的导航中创建一个特定的链接“英语”或“法语”，根据页面的不同而有所不同(如果你在页面的法语版本上，点击导航中的英语将直接你到那个页面的英文版)。目前，导航中的 [EN] 和 [FR] 链接只是转到英文或法文主页。它们是方形空间中的“链接”类型的“页面”，当您检查它们时看起来像这样:

<li class=" external-link">
<a href="/home">[EN]</a>
</li>

复制选择器产量:

#topNav > nav > ul > li:nth-child(7) > a 

我已将此代码包含在我的页面中。一位出色的用户在这里推荐的第一个功能是将法语 Logo (从面板中设置的英语 Logo 覆盖)链接到法语主页，我希望第二部分能让导航链接按照我的意愿运行:

<script>
var logo = document.querySelectorAll('h1.logo');
logo[0].addEventListener("click", function() {
location.href = "/home-fr";
})
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > 
a');
eng[0].addEventListener("click", function() {
location.href = "/englishpage";
})
</script>

与创建 Logo 链接相比，这种情况略有不同，因为 Logo 不是以链接开头的。也许那个或我的选择器是为什么这不起作用？

编辑 - 这是 Nav 的整个 HTML:

<div id="topNav">
      <nav class="main-nav dropdown-hover"><ul data-content-field="navigation">
  <li class="gallery-collection"> 
        <a href="/selected-work/">selected work</a>
  </li>
  <li class="page-collection"> 
        <a href="/about/">about</a>
  </li>
  <li class="page-collection">
        <a href="/contact/">contact</a>
  </li>
  <li class="gallery-collection">
        <a href="/realisations/">réalisations</a>
  </li>
  <li class="page-collection"> 
        <a href="/agence/">agence</a>
  </li>
  <li class="page-collection">
        <a href="/coordonnees/">coordonnées</a>
  </li>
  <li class=" external-link">
        <a href="/home">[EN]</a>
  </li>
  <li class=" external-link">
        <a href="/home-fr">[FR]</a>
  </li>
  <li class=" external-link">
        <a href="/home">return / retour</a> 
  </li>
</ul>
</nav>
    </div>

请注意，根据您所在的页面，这些链接中的大部分都通过 CSS 隐藏 - 例如，在法语页面上，只有 child 4、5、6 和 8 可见。

Answer 1

您有两种选择来完成此操作。

英文链接

将 anchor 的 href 更改为新的，如下所示:

var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].href = location.pathname.replace('-fr', '');

像您一样使用点击事件处理程序。

var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].addEventListener("click", function(e) {
    e.preventDefault();
    location.href = location.href.replace('-fr', '');
    return false;
});

对于法语链接

将 anchor 的 href 更改为新的，如下所示:

var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].href = location.pathname + '-fr';

像您一样使用点击事件处理程序。

var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].addEventListener("click", function(e) {
    e.preventDefault();
    location.href = location.href + '-fr';
    return false;
});