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

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

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

Итак:

1. Нашу ссылку представляем в виде:

   <span class="link" data-link="link.html">Ссылка</span>

   <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.location = $(this).data('link'); }); });

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

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

   //переход по ссылкам 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.link {color:#333;text-decoration: underline;cursor:pointer;} span.link:hover {text-decoration: none;}

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