Làm cách nào để bạn tạo thẻ div thành liên kết

Question

Làm cách nào để bạn tạo thẻ div thành liên kết. Tôi muốn toàn bộ div của tôi có thể nhấp được.

Answer 1

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div> 

Answer 2

JS:

<div onclick="location.href='url'">content</div> 

jQuery:

$("div").click(function(){ 
    window.location=$(this).find("a").attr("href"); return false; 
}); 

Hãy chắc chắn để sử dụng cursor:pointer cho các DIV

Answer 3

Bạn có thể làm cho toàn bộ chức năng DIV như một liên kết bằng cách thêm một onclick = "window.location = 'URL TARGET'" và bằng cách đặt kiểu của nó thành "con trỏ: con trỏ". Nhưng thường là một ý tưởng tồi khi thực hiện điều này vì công cụ tìm kiếm sẽ không thể theo dõi liên kết, người đọc sẽ không thể mở tab hoặc sao chép vị trí liên kết, v.v. Thay vào đó, bạn có thể tạo thẻ liên kết thông thường và sau đó thiết lập kiểu của nó để hiển thị: khối, và sau đó phong cách này như bạn sẽ là một DIV.

Answer 4

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div> 

Answer 5

KHÔNG LÀM VIỆC.

• Nếu bạn muốn liên kết, hãy cuộn nội dung vào đúng <A>NCHOR</a>.
• Nếu bạn muốn biến <DIV> vào một liên kết, sử dụng "javascript" để quấn <DIV> bên trong một <A>NCHOR</A>
• Nếu bạn muốn thực hiện một số hành động khi nhấp vào <DIV> sử dụng bộ xử lý onclick sự kiện ... và don' t gọi nó là "liên kết".

Answer 6

Bạn có thể sử dụng Javascript để đạt được hiệu ứng này. Nếu bạn sử dụng một khung công tác thì điều này trở nên khá đơn giản. Dưới đây là ví dụ trong jQuery:

$('div#id').click(function (e) { 
    // Do whatever you want 
}); 

Giải pháp này có lợi thế khác biệt trong việc giữ logic không có trong đánh dấu của bạn.

Answer 7

Nếu bạn phải đặt thẻ neo bên trong div, bạn cũng có thể sử dụng CSS để đặt neo để điền div thông qua display: block.

Như vậy:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div> 

Bây giờ khi người dùng nổi con trỏ của họ ở chỗ div tag anchor sẽ lấp đầy div.

Answer 8

Nếu bạn đang sử dụng HTML5, như chỉ trong this other câu hỏi, bạn có thể đặt bạn div bên a:

<a href="http://www.google.com"><div>Some content here</div></a> 

preffer phương pháp này vì nó làm cho rõ ràng trong cấu trúc của bạn rằng tất cả các nội dung là nhấp được, và nơi nó trỏ.

Answer 9

Vì vậy, bạn muốn phần tử là một yếu tố không?

Nói chung đây không phải là ý tưởng hay. Nếu bạn cần một liên kết, hãy sử dụng một liên kết. Hầu hết thời gian nó dễ dàng hơn để chỉ cần sử dụng đánh dấu thích hợp, nơi nó thuộc về.

Điều đó tất cả đã nói, đôi khi bạn chỉ cần phá vỡ các quy tắc. Bây giờ, câu hỏi không có javascript, vì vậy tôi sẽ đưa khuyến cáo ở đây:

Bạn không thể có một hành động <div> như một liên kết mà không cần sử dụng một trong hai liên kết (hoặc tương đương, chẳng hạn như một <form> chỉ chứa nút gửi) hoặc sử dụng JavaScript.

Từ đây trở đi, câu trả lời này sẽ giả định rằng JavaScript được cho phép và hơn nữa jQuery đang được sử dụng (ví dụ như ngắn gọn).

Với tất cả điều đó, hãy tìm hiểu điều gì làm cho liên kết trở thành một liên kết.

---

Các liên kết thường là các yếu tố mà bạn nhấp vào để chúng điều hướng bạn đến một tài liệu mới.

Có vẻ như đơn giản là đủ. Nghe cho một sự kiện nhấp chuột và thay đổi vị trí:

_{Đừng làm điều này}

$('.link').on('click', function() { 
 
    window.location = 'http://example.com'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link">Fake Link</div>

Ở đó bạn có nó, các <div> bây giờ là một liên kết. Đợi đã ... cái gì vậy? Điều gì về khả năng truy cập? Đúng vậy, người đọc màn hình và người dùng công nghệ hỗ trợ sẽ không thể nhấp vào liên kết, đặc biệt nếu họ chỉ sử dụng bàn phím.

Fixing đó là khá đơn giản, chúng ta hãy cho phép bàn phím chỉ sử dụng để tập trung các <div>, và kích hoạt các sự kiện nhấp chuột khi họ bấm Nhập:

_{Đừng làm điều này hoặc}

$('.link').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link" tabindex="0">Fake Link</div>

Một lần nữa, bạn đã có nó, điều này <div> bây giờ là một liên kết. Chờ đợi một lần nữa? Vẫn gặp sự cố trợ năng? Oh ok, vì vậy nó chỉ ra rằng công nghệ hỗ trợ không biết rằng <div> là một liên kết được nêu ra, vì vậy mặc dù bạn có thể đạt được điều đó thông qua bàn phím, người dùng không được cho biết phải làm gì với nó. Tuy nhiên, có một thuộc tính có thể được sử dụng để ghi đè vai trò mặc định của phần tử HTML, để người đọc màn hình và những người tương tự biết cách phân loại các phần tử tùy chỉnh, như <div> tại đây. Thuộc tính của khóa học là thuộc tính [role], và nó độc đáo cho trình đọc màn hình mà chúng tôi <div> là một liên kết:

_{Ugh, điều này ngày càng nghiêm trọng mỗi phút}

$('[role="link"]').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div>

Cuối cùng , <div> của chúng tôi là một lin --- oh bây giờ các dev khác đang phàn nàn. Gì bây giờ?

Ok, vì vậy, các nhà phát triển không thích mã. Họ đã cố gắng để preventDefault về sự kiện và nó chỉ hoạt động. Đó là dễ dàng để sửa chữa:

_{Tôi đã cảnh báo với bạn điều này là xấu}

$(document).on({ 
 
    'click': function (e) { 
 
    if (!e.isDefaultPrevented()) { 
 
     window.location = 'http://example.com'; 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div> 
 
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

Hiện chúng tôi có nó --- Có nhiều? Những gì người khác không biết? Hãy cho tôi biết mọi thứ NGAY BÂY GIỜ để tôi có thể khắc phục!

• Ok, vì vậy không có cách nào để chỉ định mục tiêu. Chúng tôi có thể khắc phục điều đó bằng cách cập nhật lên window.open.
• Nhấp vào sự kiện và sự kiện bàn phím sẽ bỏ qua Ctrl, Alt và Shift phím. Thật dễ dàng, chỉ cần kiểm tra các giá trị đó trên đối tượng sự kiện.
• Không có cách nào để chỉ định dữ liệu theo ngữ cảnh. Hãy thêm một số thuộc tính [data-*] và gọi nó là một ngày với thuộc tính đó.
• Sự kiện nhấp không tuân theo nút chuột đang được sử dụng, chuột giữa sẽ mở trong tab mới, chuột phải không được kích hoạt sự kiện. Đủ dễ dàng, chỉ cần thêm một số kiểm tra nữa cho người nghe sự kiện.
• Kiểu dáng trông kỳ lạ. KHI VĂN PHÒNG PHONG CÁCH CÁC PHONG CÁCH LÀ MỌI, IT'S A <DIV> KHÔNG ANCH!

tốt, tôi sẽ giải quyết bốn vấn đề đầu tiên và KHÔNG HƠN. Tôi đã có nó với rác thải phần tử tùy chỉnh ngu ngốc này. Tôi chỉ nên sử dụng một phần tử <a> ngay từ đầu.

_{Nói với bạn rất}

$(document).on({ 
 
    'click': function (e) { 
 
    var target, 
 
     href; 
 
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { 
 
     target = $(this).data('target') || '_self'; 
 
     href = $(this).data('href'); 
 
     if (e.ctrlKey || e.shiftKey || e.which === 2) { 
 
     target = '_blank'; //close enough 
 
     } 
 
     open(href, target); 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger({ 
 
     type: 'click', 
 
     ctrlKey: e.ctrlKey, 
 
     altKey: e.altKey, 
 
     shiftKey: e.shiftKey 
 
     }); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> 
 
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> 
 
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Lưu ý rằng ngăn xếp đoạn sẽ không mở cửa sổ bật lên cửa sổ vì cách họ đang sandboxed.}

Vậy đó. Đó là kết thúc của lỗ thỏ này. Tất cả sự điên rồ đó khi bạn có thể chỉ đơn giản là có:

<a href="http://example.com/"> 
    ...your markup here... 
</a> 

Mã tôi đăng ở đây có thể có vấn đề. Nó có thể có lỗi mà ngay cả tôi vẫn chưa nhận ra. Cố gắng để lặp lại những gì trình duyệt cung cấp cho bạn miễn phí là khó khăn. Có rất nhiều sắc thái dễ bị bỏ qua mà đơn giản là không đáng để thử mô phỏng nó 99% thời gian.

Answer 10

Hãy nhớ rằng trình thu thập thông tin tìm kiếm không lập chỉ mục mã JS. Vì vậy, nếu bạn đặt URL của bạn bên trong mã JS, hãy chắc chắn cũng bao gồm nó trong một liên kết HTML truyền thống ở nơi khác trên trang. Tức là, nếu bạn muốn Google lập chỉ mục các trang được liên kết, v.v.