Javascript 到 re-assign link 导航 Squarespace

Question

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

我想做的是让我的导航中的特定 link "English" 或 "Francais" 根据页面的不同而有所不同（如果您使用的是法文版一个页面，单击导航中的英语将引导您到该页面的英语版本）。目前，导航中的 [EN] 和 [FR] link 只是转到英文或法文主页。它们是 "Link" 在正方形空间中键入 "Pages"，当您检查它们时看起来像这样：

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

复制选择器产生：

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

我已将此代码添加到我的页面中。一位出色的用户在这里推荐的第一个功能是将法语徽标（从面板中设置的英语徽标覆盖）link 到法语主页，我希望第二部分可以使导航 link 随心所欲:

<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>

这与制作徽标 link 的情况略有不同，因为徽标不是 link 开头 with.Perhaps 或我的选择器是为什么这不起作用？

编辑 - 这是导航的全部 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>

请注意，这些 link 中的大部分都通过 CSS 隐藏，具体取决于您所在的页面 - 例如，在法语页面上，只有 4、5、6 岁的孩子，可见 8 个。

Answer 1

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

对于英语 link

将锚点的 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;
});

对于法语 link

将锚点的 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;
});

Javascript 到 re-assign link 导航 Squarespace

Javascript to re-assign link in navigation Squarespace

javascript

squarespace