У меня есть внешние ссылки в верхнем меню моего сайта. Я хочу открыть эти ссылки на новой вкладке. Я мог бы достичь этого, используя «target = _blank» в HTML. Есть ли подобное свойство CSS или что-то еще?Использование target = "_ blank" в css
К сожалению, нет. В 2013 году нет никакого способа сделать это с помощью чистого CSS.
Update: благодаря showdev для подключения к устаревшей спецификации из CSS3 Hyperlinks, и да, ни один браузер не реализовал его. Таким образом, ответ остается в силе.
Как указано c69, нет никакого способа сделать это с помощью чистого CSS.
но вы можете использовать HTML вместо:
использование
<head>
<base target="_blank">
</head>
в вашем HTML <head> тег для создания всех ссылок на страницы, которые не включают target атрибут должен быть открыт в новом пустом окне, по умолчанию. в противном случае вы можете установить целевой атрибут для каждой ссылки, как это:
<a href="/yourlink.html" target="_blank">test-link</a>
и будет переопределить
<head>
<base target="_blank">
</head>
тег, если он был определен ранее.
Ницца! У меня была та же проблема, что и у ОП. Тема WordPress, открывающая ссылки на текущей вкладке. Я отредактировал страницу HTML и бросил ваш код - даже не знал, что вы МОЖЕТЕ отредактировать голову таким образом в WP - и это сработало! Потрясающие. –
Просили CSS, это не CSS! – Enzo
В ASP.NET это делало то, что я хотел, но имел непреднамеренные последствия того, что моя форма создала новую вкладку каждый раз, когда я отправлял назад, поэтому мне пришлось установить «цель» формы явно
Другой способ использования target="_blank" является:
onclick="this.target='_blank'"
Пример:
<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
, если вы можете вставить этот атрибут 'onclick', вы могли бы просто так просто поставить' target = '_ blank'', нет? –
В ожидании принятия CSS3 таргетинга по основных браузерах, можно запустить следующую команду sed после создания (X) HTML-кода:
sed -i 's|href="http|target="_blank" href="http|g' index.html
Он добавит target="_blank" ко всем внешним гиперссылкам. Возможны также вариации.
EDIT
Я использую этот at the end of the makefile, который генерирует каждую веб-страницу на моем сайте.
Когда цели CSS3 прибывают ... могут нацеливаться на новые и т. Д. Базовые html-побеги не нейтральные mega-Corp Node farms PLOWS? Браузерные трюки? Рынок дополнений для браузеров ??? Темная паутина в золоте (издатель Oxford, MIT может любить)! И т. Д. ((О мой)) sed, чтобы спасти нейтральный нейтралитет? –
Это на самом деле javascript, но связанный/актуальный, потому что.Цели querySelectorAll по синтаксису CSS:
var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
этот пример использует CSS целевой ссылки в меню с идентификатором = «пример»
, что создает переменную, которая представляет собой набор элементов, которые мы хотим изменить, но мы до сих пор на самом деле изменить их, установив новую цель («_blank»):
for (var i = 0; i < 5; i++) {
i_will_target_self[i].style.target = "_blank";
}
Этот код предполагает, что есть 5 или меньше элементов. Это можно легко изменить, изменив фразу «i < 5.«
подробнее здесь: http://xahlee.info/js/js_get_elements.html
Array.prototype.slice.call (document.querySelectorAll ("a.someClass")). ForEach (функция (a) {a.target = "_blank";}); – robert4
@ robert4 Может передать его непосредственно 'forEach()', чем использовать 'slice()' на нем. – alex
или даже 'Array.from (document.querySelectorAll (" a.something ")). ForEach ((a) => {a.target =" _blank ";});' – alex
Есть несколько способов, CSS может 'цель' навигации. Это позволит создавать внутренние и внешние ссылки с использованием стилей атрибутов, что может помочь информировать посетителей о том, что сделают ваши ссылки.
a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }
Вы также можете настроить таргетинг на традиционный встроенный HTML-адрес target = _blank.
a[target=_blank] { font-weight: bold; }
также: селектор целей к навигационному блоку стиля и element targets.
nav { display: none; }
nav:target { display: block; }
УС: целевой селектор псевдо-класс поддерживается - caniuse, w3schools, MDN.
a[href="http"] { target: new; target-name: new; target-new: tab; }
CSS/CSS3 'target-new' собственность и т.д., не подкреплено никакими основными браузерами, 2017 августа, хотя это является частью W3 spec since 2004 February.
W3Schools 'modal' construction, использует псевдо-класс ': target', который может содержать навигацию WP. Вы также можете добавить HTML rel="noreferrer and noopener рядом с target = "_ blank", чтобы улучшить 'новая вкладка' производительность. CSS пока не откроет ссылки на вкладках, но this page объясняет, как это сделать с помощью jQuery (совместимость может зависеть от WP coders). MDN имеет хороший обзор на Using the :target pseudo-class in selectors
Я бы не подумал, что для этого в CSS будет построена конструкция. Ссылки и их цели - это конструкция разметки HTML или функциональность кода JavaScript не более. CSS относится к визуальному стилю, а не к поведению. – David
Вот что я думаю. Но просто хотел поделиться с вами, ребята, спасибо David – Ali
@David, но у нас уже есть такие вещи, как 'pointer-events', которые находятся всего в одном шаге от того, что спрашивает Mubeen;) – c69