2 способа открыть ссылку в новой вкладке браузера

Здравствуйте. В этом уроке Вы научитесь делать ссылки так, чтобы открывающаяся страница появлялась в новой вкладке Вашего браузера. Подробные примеры, как я делал все это, отдельно на jQuery, отдельно на HTML, Вы можете просмотреть ниже:

I. jQuery.

Первым делом нам нужно подключить библиотеку jQuery. Делаем это, вставляя следующий код между тегами <head> и </head>:


<script type="text/javascript" src="jquery.js"></script>

Далее размещаем саму ссылку, заранее придавая значение "external" атрибуту "rel":


<a href="http://www.ruseller.com" rel="external">RUSELLER.COM</a>

Ну, и наконец, сразу после размещения кода ссылки нам нужно вставить небольшой jQuery-код, который будет играть большую роль в работе открывающейся вкладки:


<script type="text/javascript">
$('a[rel=external]').attr('target','_blank');
</script>

II. HTML

Естественно, следующий прием вызова страницы в новой вкладке браузера будет во много раз проще и лучше и многим из Вас придется по душе. Для этого всего лишь исходной ссылке необходимо придать значение "_blank". Окончательный код ссылки будет выглядеть вот так:


<a href="http://www.ruseller.com" target="_blank">RUSELLER.COM</a>

Заключение.

На этом я заканчиваю урок. Если вдруг возникнут какие-либо вопросы, задавайте их в комментариях! ;-) До новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.queness.com
Перевел: Максим Курочкин
Урок создан: 19 Июля 2009
Просмотров: 264293
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Июля 2009 09:43
    МихаилГорюнов
    А какой смысл с помощью jQuery делать аналог target=_blank?
  • 19 Июля 2009 09:52
    zimorodok
    Что-то у меня в демо, в опере открывается в этом же окне, а не в другом.
  • 19 Июля 2009 10:03
    Brendon
    У меня опера тоже, все работает.
  • 19 Июля 2009 10:23
    МаксимКурочкин
    МихаилГорюнов: Для расширения Вашего кругозора zimorodok: Правильно, должно открываться не в новом окне а в новой ВКЛАДКЕ браузера
  • 19 Июля 2009 11:45
    Motorchiknp
    для общего развития конечно хорошо, но 2-й способ по моему все знают :)
  • 19 Июля 2009 11:46
    Motorchiknp
    а втору спасибо!
  • 19 Июля 2009 19:48
    Adonn
    Непойму 1 пособ только для тех людей которые любят усложнить себе жизнь или он лучше чем 2?
  • 19 Июля 2009 20:58
    МихаилГорюнов
    Вообще первый способ можно использовать так: $('a[href^="http://"]').attr('target','_blank'); - все внешние ссылки будут открываться в новом окне. Можно поэкспериментировать, создать файл away.php, который будет говорить типа как жаль, что вы покидаете наш сайт... и jQuery код, который будет подставлять в href чёта типа away.php?s=ыыы, где ыыы - исходное значение href.
  • 21 Июля 2009 10:04
    animhotep
    "А какой смысл с помощью jQuery делать аналог target=_blank?" а такой что допустим в XHTML 1.0 Strict использование target="_blank" запрещено
  • 22 Июля 2009 22:21
    Cheiz
    оооо чудо, это просто фантастика ))))
  • 25 Июля 2009 04:32
    zeussan
    3 способ :) Valid XHTML onclick="this.target='_blank'" :)
  • 25 Июля 2009 04:33
    zeussan
    без слешей
  • 21 Августа 2009 20:15
    TheAnswer
    мда 2 способ очень крут, прямо раскрыли тайну! xD
  • 26 Декабря 2009 00:56
    ChiviK
    Добрый вечер. А кто знет как задать параметр страници, т.е. что бы при нажатие на ссылку открывалось новое, маленькое окошко?
  • 24 Июня 2010 18:53
    Nyukers
    target="_blank" откроет новое ОКНО, а не вкладку ! Это же разные вещи по названию урока. Разве нет?
  • 4 Января 2011 18:35
    velikanov_gleb
    Делаю группу вконтакте мне нужно чтобы внутренняя ссылка открывалась в новом окне.Кто нибудь знает как это сделать при wiki разметке???
  • 14 Апреля 2011 11:03
    kindofbear
    урок вообще ниочем. во втором случае говорят о том, что и так все знают, в перовом с помощью jq добавляют атрибут из второго. смысл?
    • 23 Июля 2011 08:59
      Никита_Белоусов
      как уже сказал animhotep, просто для того чтобы пройти валидацию при доктайп XHTML 1.0 Strict))а так смысла да, мало)
  • 9 Декабря 2011 17:58
    Алексис
    Добрый день, нахожу очень полезными уроки на Вашем сайте. У меня вопрос следующего содержания: На сайте реализована разбивку текста с помощью jquery (jpagination) и в этом тексте у меня есть ссылка на другую страницу сайта (ссылка работает). Но я не могу реализовать возврат с другой страницы на исходный текст в каталоге. Ссылка выгдядит таким образом
    <a href="../katalog.php?lang=ru#neos5" class="more1"> обратно к каталогу &raquo;</a>
    . До разбивки ссылка работала, после разбивки ссылка возвращает меня на первую страницу каталога, а хотелось бы, чтобы возврат происходил на ту страницу каталога, на которой ссылка. Помогите пожалуйста, желательно подробное объяснение.
  • 7 Августа 2012 23:49
    rzaychenko
    Добрый день!Помогите пожалуйста с решением проблемки. У меня ссылка на файл в PDF формате (<p><a href="files/price.pdf" target="_blank">Скачать прайс</a></p>) не загружается, а открывается в браузере. Как заставить ее загружаться на жесткий диск ?
  • 5 Апреля 2013 15:04
    corvusok
    Огромное спасибо автору, то что нужно.
  • 8 Февраля 2014 21:17
    Dorian_1
    Круто! Сделал так у себя на сайте, теперь все работает
^ Наверх ^