HTML / CSS / JavaScript如何向內容添加超鏈接？

Question

我目前正在為一家美術館建立一個Squarespace網站，並且有一個頁面可以顯示當前的展覽 。 我添加了代碼注入，以更改當前未顯示任何展覽時顯示的消息：

<style> 
   .eventlist-empty:before { 
        content: "We are currently between exhibitions, please see the future page to see what's coming up soon.";
   } 
</style>

但是，我想在鏈接到/ future的“未來頁面”周圍添加超鏈接。 有人可以告訴我如何最好地做到這一點嗎？

謝謝！

Answer 1

您不能以這種方式使用CSS屬性content 。

最好的解決方案是在必要時使用CSS顯示/隱藏鏈接。

<style> 
   .eventlist .empty-link {
       display: none;
   }
   .eventlist-empty .empty-link { 
       display: block;
   } 
</style>

<div class="eventlist eventlist-empty">
    <a href="/future" class="empty-link">We are currently between exhibitions, please see the future page to see what's coming up soon.</a>
</div>

Answer 2

我不確定是否有可能。 您可以使用JavaScript，以便在單擊p class = eventlist-empty時將您重定向到功能頁面。

var el = document.getElementsByClassName('eventlist-empty')[0]; 
el.addEventListener("click", function(e) { 
   window.location.replace("stackoverflow.com"); 
}, false); 

Answer 3

我認為先前的答案缺少以下一個或多個注意事項：

1. 如您所說，您無權訪問基礎HTML（在不使用開發人員模式時就是Squarespace）。
2. 您必須通過設置content: ""或display:none或同時隱藏兩者來隱藏現有文本（通過Squarespace的默認CSS為該模板添加）。
3. 您必須刪除通過代碼注入添加的代碼。
4. 您必須使用頁腳代碼注入，而不是標題。

因此，請使用以下代碼（通過頁腳代碼注入）代替原來的代碼：

<style>
    .eventlist-empty:before {
        content: "";
        display: none;
    }
</style>
<script>
    (function() {
        var emptyList = document.getElementsByClassName("eventlist-empty")[0];
        if (emptyList) {
            emptyList.innerHTML = "We are currently between exhibitions, please see the <a href='/future/'>future page</a> to see what's coming up soon.";
        }
    })();
</script>

Answer 4

將此添加到您的網站頁腳注入

<script>
var emptyList = document.querySelector('.eventlist-empty');

if (emptyList) {
  var anchorEl = document.createElement('a');
  anchorEl.href = "/future";
  emptyList.parentNode.insertBefore(anchorEl, emptyList);
  anchorEl.appendChild(emptyList);
}
</script>

只需為您在該元素周圍包裹一個定位標記

Answer 5

如果您想創建一個指向網站中其他頁面的簡單鏈接，請使用以下命令：

<a href="/future">future page</a>

您無法使用需要使用HTML的CSS來做到這一點