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

【问题标题】：Javascript to re-assign link in navigation SquarespaceJavascript 在导航 Squarespace 中重新分配链接
【发布时间】：2018-04-11 07:03:16
【问题描述】：

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

我想要做的是在我的导航中创建一个特定的链接“英语”或“法语”，具体取决于页面（如果您使用的是法语版本的页面，点击导航中的英语会直接你到那个页面的英文版）。目前，导航中的 [EN] 和 [FR] 链接只需转到英文或法文主页。它们是方形空间中的“链接”类型“页面”，当您检查它们时看起来像这样：

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

复制选择器产生：

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

我已在我的页面上包含此代码。一位出色的用户在这里推荐的第一个功能使法语徽标（从面板中设置的英语徽标覆盖）链接到法语主页，我希望第二部分可以使导航链接按我的意愿行事：

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

这与制作徽标链接略有不同，因为徽标不是一开始的链接。也许那或我的选择器是为什么这不起作用？

编辑 - 这是导航的整个 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 隐藏，具体取决于您所在的页面 - 例如，在法语页面上，只有子 4、5、6 和 8 可见。

【问题讨论】：

你能解释一下这段代码会发生什么吗？它什么都不做还是做旧的（默认）行为？
它链接到法语主页（默认行为）
PS - URL 的结构使得“fr”附加到法语版本的 url - 其余部分保持不变。如果脚本负责找出当前的 url 并生成一个新的，那就太好了，这样我就可以简单地将脚本放到该唯一元素的页脚中（导航 li 中的第 n 个孩子 7）。 --- 例如，如果英文 URL = 'www.site.com/project' -- 那么法文 URL = 'www.site.com/project-fr'
最后一件事。您可以获取（和围绕）EN] 和 [FR] 链接的 html 并将其放在您的帖子中吗？基本上#topNav的整个结构，这样你的选择器就可以验证了。
请看更新后的原帖！

标签： javascript squarespace

【解决方案1】：

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

英文链接

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

法语链接

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

【讨论】：