Блог веб-разработчика Евгения Молодецкого

Делаем ссылки на сайте через javascript

06.08.2018 | Написал

SEO-шники попросили проставить ссылки не классическим способом A HREF=…, а используя нейтральный html-тег + JS. Реализуем это следующим способом.

Точнее даже двумя способами. Первый, используя window.location, а второй — window.open.

Итак:

  1. Нашу ссылку представляем в виде:
    <span class="link" data-link="link.html">Ссылка</span>
  2. Добавляем такой скрипт:
    //переход по ссылкам data-link
    $(document).ready(function(){
        $('span.link').click(function() {
            window.location = $(this).data('link');
        });
    });

    Либо вот такой:

    //переход по ссылкам data-link
    $(document).ready(function(){
        $('span.link').click(function() {
            window.open($(this).data('link'),'_blank');
        });
    });

    Второй отличается тем, что метод window.open имеет второй аргумент — атрибут target. тем самым мы можем открывать ссылку в новом окне.

  3. Также добавим немного стилей для того, чтобы наша конструкция визуально выглядела как ссылка:
    span.link {color:#333;text-decoration: underline;cursor:pointer;}
    span.link:hover {text-decoration: none;}

В результате наш span будет вести себя как классическая ссылка, не являясь ей.

Метки: ,
Комментарии читателей статьи "Делаем ссылки на сайте через javascript"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.