target=”_blank 및 개별 창 아이콘 추가(jQuery)

동기


HTML에 a 태그를 쓸 때 외부 링크와 내부 링크를 구분하고 target='_blank'등을 부여하는 것은 매우 번거롭다.
jQuery로 해결한 선인의 예(http://web-pc.net/jquery007)그래서 이걸 적용하고 싶어요.
따라서 href가 지정한 URL을 기호로 부여해 보십시오.

하고 싶은 일


* 외부 및 내부 링크를 "http://"없음으로 미리 구분
외부 링크: target="_blank"& 태그 아이콘
• 내부 링크: 손질 없음

코드

<!-- External Resources -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Main JS -->
<script>
    $("a[href^='http://']").attr("target","_blank");
    $('a[target="_blank"]').after(' <i class="fa fa-external-link"></i>');
</script>

<!-- Example HTML-->
<ul>
<li><a href="example.html">内部リンク</a></li>
<li><a href="http://google.com">外部リンク</a></li>
<li><a href="//google.com">外部リンク(修飾なし)</a></li>
</ul>

결과

<ul>
<li><a href="example.html">内部リンク</a></li>
<li><a href="http://google.com" target="_blank" >外部リンク</a><i class="fa fa-external-link"></i></li>
<li><a href="//google.com">外部リンク(修飾なし)</a></li>
</ul>

두 번째 링크만 target="_blank"로 표시됩니다.
href에 "http://"의 첫 번째 링크와 세 번째 링크는 target="_blank"또는 태그가 없습니다.

참고 자료


target=”_blank"와class는 jQuery에 또 다른 창 아이콘을 추가합니다. - 홈페이지 제작 및 인쇄물 디자인 업데이트를 하면 오사카의 WPC
http://web-pc.net/jquery007
20개의 jQuery 스킬 집합, 소량의 코드만 있으면 가능
http://www.webcreatorbox.com/tech/jquery-tips20/
[요약] Font Awesome의 사용법을 요약했습니다. #sakainote.
http://sakainote.com/?p=1820

좋은 웹페이지 즐겨찾기