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

Я считаю, что в предыдущих ответах отсутствует одно или несколько из следующих соображений:

1. Как вы сказали, у вас нет доступа к базовому HTML (например, Squarespace, когда не используется режим разработчика).
2. Вы должны скрыть существующий текст (который добавляется через CSS по умолчанию для этого шаблона) content: "" или же display:none или оба.
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 3

Я не уверен, что это возможно. Вы можете использовать JavaScript, поэтому, когда вы нажимаете в p class=eventlist-empty, вы перенаправляете вас на страницу компонента.

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

Answer 4

Добавьте это на ваш сайт Footer Injection

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

Вы не можете сделать это с помощью CSS, вам нужно использовать HTML