CSS에서 target =“_ blank”사용
내 웹 사이트의 상단 메뉴에 외부 링크가 있습니다. 이 링크를 새 탭에서 열고 싶습니다. HTML에서 "target = _blank"를 사용하여 달성 할 수 있습니다. 비슷한 CSS 속성이나 다른 것이 있습니까?
불행하게도. 2013 년에는 순수한 CSS로 할 수있는 방법이 없습니다.
업데이트 : CSS3 Hyperlinks 의 구식 사양에 연결 한 showdev 덕분에 , 그렇습니다. 어떤 브라우저도이를 구현하지 않았습니다. 따라서 대답은 여전히 유효합니다.
c69가 언급했듯이 순수한 CSS로 할 수있는 방법은 없습니다.
하지만 대신 HTML을 사용할 수 있습니다.
사용하다
<head>
<base target="_blank">
</head>
기본적으로 새 빈 창에서 열리는 속성을 포함 하지 않는<head> 모든 페이지 링크를 만들기 위해 HTML 태그 에서. 그렇지 않으면 다음과 같이 각 링크에 대한 대상 속성을 설정할 수 있습니다.target
<a href="/yourlink.html" target="_blank">test-link</a>
그리고 그것은 재정의합니다
<head>
<base target="_blank">
</head>
이전에 정의 된 경우 태그입니다.
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; }
또한 : 탐색 블록 및 요소 대상의 스타일을 지정하는 대상 선택기 .
nav { display: none; }
nav:target { display: block; }
CSS : 대상 의사 클래스 선택기가 지원됩니다 -caniuse , w3schools , MDN .
a[href="http"] { target: new; target-name: new; target-new: tab; }
CSS / CSS3 ' target-new '속성 등, 주요 브라우저에서 지원되지 않음, 2017 년 8 월, 2004 년 2 월 이후 W3 사양의 일부 임 .
W3Schools 'modal'구성 은 WP 탐색을 포함 할 수있는 ': target'의사 클래스를 사용합니다. HTML rel = "noreferrer 및 noopener를 target ="_ blank "옆에 추가 하여 '새 탭' 성능 을 향상시킬 수도 있습니다. CSS는 현재 탭에서 링크를 열지 않지만 이 페이지 에서는 jQuery를 사용하여이를 수행하는 방법을 설명합니다 (호환성은 다음에 따라 달라질 수 있습니다. WP 코더 ) .MDN은 선택기에서 : target 의사 클래스 사용에 대한 좋은 리뷰를 가지고 있습니다.
사용하는 또 다른 방법 target="_blank"은 다음과 같습니다.
onclick="this.target='_blank'"
예:
<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
.querySelectorAll이 CSS 구문으로 대상을 지정하기 때문에 실제로는 자바 스크립트이지만 관련 / 관련이 있습니다.
var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
이 예제는 css를 사용하여 id = "example"인 메뉴의 링크를 대상으로합니다.
변경하려는 요소의 모음 인 변수를 생성하지만, 새 대상 ( "_blank")을 설정하여 실제로 변경합니다.
for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}
이 코드는 5 개 이하의 요소가 있다고 가정합니다. "i <5"라는 문구를 변경하면 쉽게 변경할 수 있습니다.
자세한 내용은 http://xahlee.info/js/js_get_elements.html을 참조하십시오.
CSS3 타겟팅 채택을 기다리는 동안…
주요 브라우저에서 CSS3 타겟팅을 채택하기를 기다리는 동안 sed(X) HTML이 생성되면 다음 명령을 실행할 수 있습니다 .
sed -i 's|href="http|target="_blank" href="http|g' index.html
target="_blank"모든 외부 하이퍼 링크에 추가 됩니다. 변형도 가능합니다.
편집하다
내 사이트의 모든 웹 페이지를 생성 하는 끝에makefile 이것을 사용합니다 .
ReferenceURL : https://stackoverflow.com/questions/17281486/use-target-blank-in-css
'development' 카테고리의 다른 글
| knockout.js에 조건부로 요소 속성 추가 (0) | 2021.01.10 |
|---|---|
| 목록의 각 항목을 나머지 항목과 한 번만 비교하는 방법은 무엇입니까? (0) | 2021.01.10 |
| 단일 데이터베이스에서 테이블 이름을 필터링 할 수 있어야합니까? (0) | 2021.01.10 |
| C에서 구조체 또는 구조체에 대한 포인터를 반환할지 여부를 어떻게 선택합니까? (0) | 2021.01.10 |
| @RunWith 및 @ContextConfiguration 주석이 달린 jUnit 테스트에서 Spring 컨텍스트에 액세스하는 방법은 무엇입니까? (0) | 2021.01.10 |