Question

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

我想要做的是在我的导航行为中根据页面设置一个特定的链接“英语”或“Francais”（如果你在页面的法语版本，点击导航中的英语会指示你到那个页面的英文版）。目前，导航中的[EN]和[FR]链接只是转到英语或法语主页。它们是方形空间中的“链接”类型“页面”，当您检查它们时看起来像这样：

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

复制选择器会产生：

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

我已将此代码包含在我的网页上。精彩用户推荐的第一个功能是将法语标识（从面板中设置的英文标识覆盖）链接到法语主页，我希望第二部分可以使导航链接按照我的意愿行事： / p>

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

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

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

Answer 1

您有两种方法可以完成此任务。

对于Englinsh链接

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

Javascript在导航Squarespace

1 个答案: