Делаем ссылки на сайте через 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"

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

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

Ваш адрес email не будет опубликован.

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