Làm cách nào để thêm mục tiêu _blank trong CSS?

trong thẻ HTML của bạn để tạo tất cả các liên kết trang không bao gồm thuộc tính

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
 Nội dung chính Show
 
Mã ví dụ
Khung không dùng nữa; 
Mặc định 

  CatPhotoApp
  
    Cat Photos
a target=”_blank” Mở trong Tab Trình duyệt Mới (hoặc Cửa sổ)
Tại sao mở trong một trình duyệt mới?
Mở tất cả các liên kết bên ngoài trong một tab mới bằng JavaScript
Lý do không sử dụng `target=”_blank”
Bạn có thể thêm mục tiêu trống trong CSS không?
Làm cách nào để thêm mục tiêu _blank trong HTML?
Làm cách nào để nhắm mục tiêu _blank trong Javascript?
Làm cách nào để sử dụng mục tiêu trong CSS?
 
    

  

1 được mở trong một cửa sổ trống mới theo mặc định. nếu không, bạn có thể đặt thuộc tính đích cho mỗi liên kết như thế này

ĐỌC LƯU Ý NÀY. Kể từ đó, tôi đã biết rằng việc sử dụng

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

2 có thể gây ra sự cố bảo mật. Vì vậy, để đảm bảo khả năng truy cập và bảo mật, tôi khuyên bạn nên tránh hoàn toàn

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

2. Tôi để lại bài đăng này như một ví dụ về việc học hỏi từ việc hiển thị công việc của bạn

---

Gần đây tôi đang viết một trang tĩnh cho một dự án mã nguồn mở và tôi muốn chèn một số liên kết. Cá nhân tôi thích các liên kết bật lên trong cửa sổ mới hơn. Bằng cách đó, tôi có thể mở một tỷ tỷ tab cùng một lúc, như thường lệ. (Không phải lúc nào bạn cũng nên viết thuộc tính này và sở thích cá nhân không phải là lý do tuyệt vời để sử dụng nó, như tôi đã biết. )

Nhưng làm thế nào để bạn triển khai các tab mới?

Các liên kết là tính năng chính trong trang tĩnh này và tôi muốn kiểm tra xem mình đã viết chúng có dễ truy cập hay không, vì vậy tôi đã tweet tại Dự án A11y để kiểm tra cú pháp của mình

Họ đã chỉ ra một cách hữu ích rằng những người sử dụng công nghệ hỗ trợ bằng một cửa sổ bất ngờ bật lên

Vì vậy, giải pháp là gì?

Có một vài điều để thử

Bạn có thể thêm cảnh báo vào tên hoặc nhãn như vậy

Bạn cũng có thể sử dụng CSS để tạo cảnh báo. W3. org có một ví dụ về giao diện của nó

Bạn sẽ cần một khoảng bên trong liên kết của mình, bao bọc thông báo cảnh báo

Sau đó, bạn sẽ cần áp dụng các lớp CSS để ẩn thông báo cảnh báo cho đến khi bạn di chuột. W3. org có thêm chi tiết về điều đó

Hãy cho chúng tôi biết chuyện gì đang xảy ra.
Mô tả chi tiết vấn đề của bạn tại đây.

  **Your code so far**

____1

  **Your browser information:**

Tác Nhân Người Dùng bây giờ là.

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

5

Thách đấu. Bước 13

Liên kết đến thử thách

Hãy cho chúng tôi biết chuyện gì đang xảy ra.
Mô tả chi tiết vấn đề của bạn tại đây.

  **Your code so far**

____4

  **Your browser information:**

Tác Nhân Người Dùng bây giờ là.

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

6

Thách đấu. Bước 13

Liên kết đến thử thách

Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Thuộc tính củaLàm thế nào để sử dụng (Để tạo siêu liên kết) trong HTML.

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

7 làm gì? Chỉ định ngữ cảnh trong đó tài nguyên được liên kết sẽ mở

nội dung

Mã ví dụ

The home page will open in another tab.

Trang chủ sẽ mở trong một tab khác

Khung không dùng nữa;

Giá trị hiện tại duy nhất có liên quan của

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

1 là

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

8. Các giá trị khác của

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.

1 được sử dụng để chỉ định các khung cụ thể. Tuy nhiên, các khung không được dùng trong HTML5

Mặc định CatPhotoApp Cat Photos

Click here to view more cat photos.

1

Nếu không có

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

1 nào được chỉ định, liên kết sẽ mở trong ngữ cảnh hiện tại, trừ khi người dùng hoặc trình duyệt chỉ định khác

a target=”_blank” Mở trong Tab Trình duyệt Mới (hoặc Cửa sổ)

Thuộc tính

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

1 chỉ định nơi tài liệu được liên kết sẽ mở khi liên kết được nhấp vào. Mặc định là cửa sổ hiện hành. Nếu

jQuery(document.links)   .filter(function() {     return this.hostname != window.location.hostname;   })     .attr('target', '_blank');  

2, tài liệu được liên kết sẽ mở trong một tab mới hoặc (trên các trình duyệt cũ hơn) một cửa sổ mới

Tại sao mở trong một trình duyệt mới?

Lý do phổ biến nhất để sử dụng `target=”_blank” là để các liên kết ngoại vi mở trong một tab riêng biệt. Điều này cho phép người dùng nhấp vào một tài liệu tham khảo và quay lại sau mà không cần rời khỏi trang hiện tại. Nó giữ khách truy cập trên trang web của bạn lâu hơn và cải thiện hầu hết các số liệu của bạn. tỷ lệ thoát, chuyển đổi, các trang đã truy cập

Mở tất cả các liên kết bên ngoài trong một tab mới bằng JavaScript

Bạn không cần thêm thủ công

jQuery(document.links)   .filter(function() {     return this.hostname != window.location.hostname;   })     .attr('target', '_blank');  

2 vào mọi liên kết trên trang web của mình. Nếu bạn có nhiều liên kết ra bên ngoài (điều bạn nên làm), bạn có thể dễ dàng thêm một số mã JavaScript vào trang web của mình và tự động chuyển tất cả các liên kết bên ngoài thành liên kết

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

8

jQuery(document.links)   .filter(function() {     return this.hostname != window.location.hostname;   })     .attr('target', '_blank');  

(Bạn có thể thấy hình thức sửa đổi một chút của mã này đang hoạt động trên mọi trang của trang web này. ) Thủ thuật này yêu cầu jQuery, nhưng rất có thể bạn đã sử dụng nó rồi. Nó được sử dụng trong các khung và hệ thống quản lý nội dung phổ biến nhất, bao gồm WordPress, Drupal và Twitter Bootstrap. Nếu bạn cần làm điều đó mà không có jQuery, điều đó cũng có thể được thực hiện. Đây là phiên bản "JavaScript đơn giản"

  CatPhotoApp
  
    
Cat Photos
    
    
Click here to view more cat photos.
    

  

0

Bên cạnh việc làm cho nó dễ dàng hơn, điều này sẽ làm sạch đánh dấu của bạn một cách đáng kể

Lý do không sử dụng `target=”_blank”

Một số người cho rằng người dùng không thích mở liên kết trong ngữ cảnh duyệt web mới. Họ cho rằng làm như vậy giống như quảng cáo bật lên và các hành vi gây phiền nhiễu khác. Với sự gia tăng của trình duyệt theo tab, lập luận này phần lớn đã biến mất. Hầu hết người dùng thích mở các liên kết trong một tab mới, vì nó cho phép họ đến các liên kết được tham chiếu trong hàng đợi để đọc sau mà không làm mất ngữ cảnh duyệt web hiện tại của họ

Bạn có thể thêm mục tiêu trống trong CSS không?

Làm cách nào để thêm mục tiêu _blank trong HTML?

Làm cách nào để nhắm mục tiêu _blank trong Javascript?

Làm cách nào để sử dụng mục tiêu trong CSS?