Thực đơn
trang chủMạng xã hội

Làm cách nào để tạo nút HTML hoạt động như một liên kết? Khi nào nên sử dụng phần tử Nút

Có hai cách tiếp cận để tạo nút trên trang web dưới dạng liên kết. Chúng ta hãy xem xét từng chi tiết.

1. Nút ở dạng hình ảnh

Đây là cách tiếp cận đơn giản nhất để tạo nút làm liên kết trên trang web. Để làm điều này, bạn chỉ cần tìm một hình ảnh phù hợp cho nút. Ví dụ: hình ảnh có nút của bạn được gọi là nút.jpg. Sau đó, để tạo liên kết, mã phải như sau:

... ...

Đây là những gì nó biến thành trên trang của trang web:

Đây là tùy chọn cơ bản nhất. Tôi khuyên bạn nên đọc về thẻ và nhãn để tùy chỉnh nút chính xác theo yêu cầu của bạn.

Nhân tiện, có một trang web đặc biệt để tạo hình ảnh cho các nút: http://dabuttonfactory.com/. Tại đây, bạn có thể tạo một nút miễn phí theo sở thích của mình (đặt kiểu, chọn hình ảnh, viết văn bản phù hợp, v.v.).

2. Nút có sử dụng HTML nhãn

Tùy chọn này cũng là một trong những phương pháp tạo nút làm liên kết. Tôi sẽ đưa bạn ví dụ cơ bản nút được tạo bằng thẻ và:

... ...

Đây là những gì nó sẽ trông giống như trên trang:

Thay vì URL1 và URL2, bạn cần viết địa chỉ của các trang bạn cần đến. Nếu bạn muốn liên kết mở trong tab mới (tương tự như thuộc tính target="_blank" của thẻ a), thì thay vì onclick="javascript:window.location="..."" bạn cần viết onclick=" javascript:window.open ="..."" (thay thế vị trí bằng mở).

Tôi gần như chắc chắn rằng bạn sẽ muốn thiết kế nút này theo cách khác (để phù hợp với thiết kế trang web của bạn). Để làm điều này, hãy giới thiệu lớp btn:

.btn ( //Nhiệm vụ phong cách chung cho chiều cao nút: 30px; màu viền :#c2e254 #9bb838 #9bb838 #c2e254 ; kiểu viền :rắn ; chiều rộng đường viền: 1px; nền :#c2e254 ; con trỏ:con trỏ; ) .btn:hover ( // Kiểu nút khi con trỏ di chuột qua nó border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; Background :#FFFF99 ; ) .btn: tiêu điểm ( // Kiểu nút khi ở nền tiêu điểm :#ddd ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; ) .btn:active ( // Kiểu nút khi đã nhấp vào nền :#ff0000 ; màu đường viền :#ddd #333 #333 #ddd ; kiểu đường viền :solid ; chiều rộng đường viền :1px ; )

Sau đó, nút sẽ trông như thế này trên trang.

Hỗ trợ trình duyệt cho các tính năng CSS3 và các tính năng liên quan sử dụng tích cực Trong thiết kế web, độ dốc, bóng và làm tròn đã dẫn đến việc làm mờ ranh giới rõ ràng giữa các thành phần giao diện tích hợp và các thành phần “vẽ”. Trên thực tế, người dùng không nên quan tâm đến những gì trước mặt mình, một liên kết hay một nút, ngay cả khi chúng trông giống hệt nhau, bởi vì cả hai đều có thể nhấp vào được. Thực tế, sử dụng không đúng cách Việc thay đổi một yếu tố này thay vì yếu tố khác có thể dẫn đến vi phạm sự hiểu biết về logic của trang web. Nói cách khác, nó sẽ trở nên bất tiện và khó chịu cho người truy cập trang web khi sử dụng nó.

Hãy tạo một liên kết và một nút, thiết kế chúng theo cùng một cách và xem chúng khác nhau như thế nào ngoài thiết kế. Ở ví dụ 1 mình đã chèn tag vào code và áp dụng lớp phong cách thiết kế cho chúng, đồng thời cố gắng loại bỏ sự khác biệt để hai yếu tố này trông giống nhau, giống như anh em sinh đôi.

Ví dụ 1. Thiết kế các phần tử

HTML5 CSS3 IE Cr Op Sa Fx

Liên kết và nút .design ( display: inline-block; /* Phần tử khối nội tuyến */ đệm: 5px 20px; /* Thêm trường */ text-trang trí: none; /* Xóa gạch chân khỏi liên kết */ con trỏ: con trỏ; / * Con trỏ tay */ nền: #deefff; /* Nền cho các trình duyệt không hỗ trợ độ dốc */ /* Độ dốc */ nền: -moz-Tuyến-gradient(top, #deefff 0%, #98bede 100%); nền: -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%,#deefff), dừng màu (100%,#98bede)); nền: -webkit-tuyến tính-gradient(trên cùng, # deefff 0%,#98bede 100%); nền: -o-Linear-gradient(top, #deefff 0%,#98bede 100%); nền: -ms-Linear-gradient(top, #deefff 0%,#98bede 100%); nền: gradient tuyến tính(top, #deefff 0%,#98bede 100%); bán kính đường viền: 10px; /* Làm tròn các góc */ đường viền: 1px liền khối #008; /* Thêm đường viền màu xanh * /font : 12px/1 Arial, sans-serif; /* Serif font */ color: #2c539e; /* Màu văn bản và liên kết */ )

Đây là giao diện của trình duyệt Chrome (Hình 1).

Thoạt nhìn không có sự khác biệt. Cả hai phần tử đều giống nhau; khi bạn di chuột qua chúng, nó sẽ biến thành một “bàn tay”. Bạn có thể nhấp vào và chờ âm thanh trả lời. Đây là nơi những điều nhỏ nhặt bắt đầu, nơi ma quỷ nằm. Tôi hệ thống hóa sự khác biệt trong những điều nhỏ nhặt.

  • trong dòng trạng thái, trình duyệt hiển thị địa chỉ của liên kết mà nó dẫn tới;
  • liên kết có thể được mở trong một cửa sổ hoặc tab mới bằng nút chuột giữa;
  • liên kết có thể được lưu thông qua menu ngữ cảnh của trình duyệt.
  • Khi nút được nhấp vào, nó sẽ chuyển đến trang được chỉ định bên trong thuộc tính hành động của thẻ. Tất nhiên, điều này hiệu quả nếu chúng ta có một nút được nhúng trong biểu mẫu. Trong ví dụ trên, bạn thậm chí có thể nhấp vào nút, nhưng nó sẽ không dẫn đến điều gì cả;
  • Bạn có thể đính kèm một hàm JavaScript vào nút, điều này sẽ làm được điều gì đó kỳ diệu mà một liên kết không thể làm được.

Hóa ra kết quả của việc nhấp vào nút là không thể đoán trước được, không giống như một liên kết. Ở đây chúng tôi biết chắc chắn rằng một trang mới sẽ mở ra. Trong trường hợp có một nút, một trang mới có thể mở ra, một tập lệnh có thể được thực thi hoặc sẽ không có gì xảy ra cả. Ngoài ra còn có sự nhầm lẫn giữa nút và liên kết. Nút siêu phong cách của chúng tôi trông không giống chính nó và để cho thấy rằng nó có thể được nhấp vào, chúng tôi thêm thuộc tính con trỏ vào các kiểu bằng con trỏ giá trị. Nhưng điều này dẫn đến thực tế là nút này hiện được coi là một liên kết và một số người dùng cố gắng mở nút như vậy trong một tab mới và điều này tất nhiên là không thể.

Có thể làm gì để loại bỏ mâu thuẫn này. Có một số lựa chọn.

  • Không làm gì cả, hãy để người dùng tự tìm hiểu.
  • Tận dụng trải nghiệm JavaScript. Trong trường hợp này, các liên kết thông thường được gạch chân (nói chung là không cần thiết) và văn bản khi được nhấp vào sẽ mở ra một khối vô hình hoặc thay đổi nội dung của trang hiện tại, được đánh dấu bằng dấu chấm gạch chân.
  • Xóa thuộc tính con trỏ khỏi nút, để lại giá trị mặc định.

    • Văn bản chấm được hiển thị trong Hình. 2. Để rõ ràng, tôi tăng kích thước phông chữ lên một chút.

    Cơm. 2. Nút có dòng chữ gạch chân có dấu chấm

    Một lần nữa, nếu nhấp vào nút sẽ mở ra một trang khác thì không cần thiết phải có dòng chấm vì nó sẽ khiến người dùng nhầm lẫn. Vì vậy, phương pháp 2 chỉ phù hợp với các tập lệnh thực hiện một số công việc trong cùng một trang.

    Tôi muốn tạo một nút HTML hoạt động như một liên kết. Bằng cách này, khi bạn nhấp vào nút, nó sẽ chuyển hướng đến trang. Tôi muốn nó dễ tiếp cận nhất có thể.

    Tôi cũng thích nếu URL không có bất kỳ ký tự hoặc tham số bổ sung nào.

    Làm thế nào tôi có thể đạt được điều này?

    Tiếp tục

    nhưng vấn đề là trong Safari và Internet Explorer, nó thêm dấu chấm hỏi vào cuối URL. Tôi cần tìm giải pháp không thêm bất kỳ ký tự nào vào cuối URL.

    Có hai giải pháp khác cho việc này: sử dụng JavaScript hoặc tạo kiểu cho liên kết trông giống như một nút.

    Sử dụng JavaScript:

    Tiếp tục

    Nhưng điều này rõ ràng yêu cầu JavaScript và vì lý do này, trình đọc màn hình khó truy cập được hơn. Điểm liên kết - đi tới một trang khác. Vì vậy, việc cố gắng làm cho một nút hoạt động giống như một liên kết là quyết định sai lầm. Đề nghị của tôi là bạn nên sử dụng một liên kết và tạo kiểu cho nó trông giống như một nút.

    Tiếp tục

    27 câu trả lời

    HTML

    Đơn giản cách HTML là đặt nó vào nơi bạn chỉ định URL mục tiêu mong muốn trong thuộc tính hành động.

    Nếu cần thiết hãy cài đặt hiển thị CSS: nội tuyến; trong biểu mẫu để giữ cho nó phù hợp với văn bản xung quanh. Thay vì trong ví dụ trên, bạn cũng có thể sử dụng . Điểm khác biệt duy nhất là vật phẩm cho phép trẻ em.

    Theo trực giác, bạn có thể mong đợi có thể sử dụng , tương tự như phần tử nhưng rất tiếc là không, thuộc tính này không tồn tại theo Đặc tả HTML.

    CSS

    Nếu CSS được cho phép, chỉ cần sử dụng , mà bạn muốn xuất hiện giống như một nút, sử dụng, trong số những thứ khác, thuộc tính ngoại hình (hỗ trợ trình duyệt chỉ có Internet hiện tại (tháng 7 năm 2015) vẫn còn kém).

    Đi đến google a.button ( -webkit-ngoại hình: nút; -moz-xuất hiện: nút; xuất hiện: nút; trang trí văn bản: không; màu: ban đầu; )

    Hoặc chọn một trong nhiều Thư viện CSS, chẳng hạn như Bootstrap.

    Đi đến google

    JavaScript

    Nếu bật JavaScript, hãy đặt window.location.href .

    Nếu điều này vẻ bề ngoài nút bạn đang tìm kiếm trong thẻ cơ sở Các ràng buộc HTML, bạn có thể sử dụng Twitter Bootstrap để định dạng bất kỳ liên kết/nút phổ biến nào sau đây loại HTMLđể chúng xuất hiện dưới dạng một nút. Xin lưu ý sự khác biệt về hình ảnh giữa các phiên bản 2, 3 hoặc 4 của khung:

    Nút liên kết

    Cách sử dụng:

    Nhấp vào đây

    Thật không may, đánh dấu này không còn hợp lệ trong HTML5 và sẽ không xác thực hoặc luôn hoạt động như mong đợi. Thực hiện một cách tiếp cận khác.

    Giống như HTML5, các nút hỗ trợ thuộc tính formaction. Điều tuyệt vời nhất là không cần Javascript hoặc gian lận.

    Chuyển đến Stack Overflow!

    Cảnh báo

    Nó thực sự rất đơn giản và không sử dụng bất kỳ thành phần biểu mẫu nào. Bạn chỉ có thể sử dụng thẻ sử dụng nút bên trong :).

    Nhấp vào đây!

    Và nó sẽ tải href trên cùng một trang. Muốn trang mới? Chỉ cần sử dụng target="_blank" .

    Nếu bạn đang sử dụng biểu mẫu nội bộ, hãy thêm thuộc tính type="reset" cùng với thành phần nút. Điều này sẽ ngăn biểu mẫu có hiệu lực.

    www.example.com

    Cách duy nhất để làm điều này (ngoại trừ ý tưởng khéo léo của BalusC!) là thêm vào nút JavaScript khi nhấp chuột sự kiện không phù hợp với khả năng tiếp cận.

    Có bất lợi gì khi thực hiện bước tiếp theo?

    Lịch trình

    Trong đó a.nostyle là lớp có kiểu cho liên kết của bạn (nơi bạn có thể loại bỏ kiểu liên kết tiêu chuẩn) và span.button là lớp có kiểu cho "nút" của bạn (nền, đường viền, độ dốc, vân vân. ).

    Cùng với những gì một số người khác đã thêm vào, bạn có thể phát điên chỉ với một lớp CSS đơn giản, không có PHP, không có jQuery, chỉ có HTML và CSS.

    Tạo một lớp CSS và thêm nó vào mỏ neo của bạn. Mã ở bên dưới.

    Nút liên kết ( chiều cao: 60px; phần đệm: 10px 15px; nền: #4479BA; màu: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; bán kính đường viền: 4px; đường viền: rắn 1px #20538D; bóng văn bản: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba( 0, 0, 0, 0,2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inet 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); ) .button-link:hover ( nền: #356094; viền: rắn 1px #2A4E77; văn bản- trang trí: không có; ) Nhấn vào đây để đi

    Đó là tất cả. Việc này rất dễ thực hiện và cho phép bạn thỏa sức sáng tạo theo ý muốn. Bạn kiểm soát màu sắc, kích thước, hình dạng (bán kính), v.v. Để có được thông tin thêm xem trang web nơi tôi tìm thấy điều này.

    Dường như có ba giải pháp cho vấn đề này (tất cả đều có ưu và nhược điểm).

    Giải pháp 1: Nút trên biểu mẫu. Tiếp tục

    Nhưng vấn đề là ở một số phiên bản trình duyệt phổ biến chẳng hạn như Chrome, Safari và trình duyệt web IE, nó sẽ thêm dấu chấm hỏi vào cuối URL. Nói cách khác, đối với đoạn mã trên, URL của bạn sẽ trông như thế này:

    Http://someserver/pages2?

    Có một cách để khắc phục điều này nhưng nó sẽ yêu cầu một số cấu hình phía máy chủ. Một ví dụ về việc sử dụng Apache Mod_rewrite là chuyển hướng tất cả các yêu cầu có dấu ? tới URL tương ứng của họ mà không có ? . Đây là một ví dụ sử dụng .htaccess, nhưng có đầy đủ quy trình:

    RewriteCond %(THE_REQUEST) \?\ HTTP RewriteRule ^/?(index\.cfm)? /?

    Các cấu hình tương tự có thể khác nhau tùy thuộc vào máy chủ web được sử dụng và ngăn xếp được sử dụng. Vì vậy, tóm tắt về phương pháp này:

    • Đó là một nút thực sự và có ý nghĩa về mặt ngữ nghĩa.
    • Không có JavaScript, không cần kiểu dáng phức tạp.
    • Theo sau? trông xấu xí trong một số trình duyệt. Điều này có thể được khắc phục bằng cách hack (trong một số trường hợp) với sử dụng BÀI ĐĂNG thay vì NHẬN, nhưng một cách sạch sẽ là một chuyển hướng phía máy chủ. Nhược điểm của chuyển hướng phía máy chủ là nó sẽ gây ra lệnh gọi HTTP bổ sung cho các liên kết đó do chuyển hướng 304.
    • Thêm một yếu tố bổ sung
    • Các yếu tố định vị khi sử dụng nhiều hình dạng có thể phức tạp và trở nên tồi tệ hơn khi làm việc với các thiết kế đáp ứng. Một số cách sắp xếp có thể không thể đạt được giải pháp này tùy thuộc vào thứ tự của các phần tử. Điều này cuối cùng có thể ảnh hưởng đến khả năng sử dụng nếu dự án bị ảnh hưởng bởi vấn đề này.
    Giải pháp 2: Sử dụng JavaScript.

    Bạn có thể sử dụng JavaScript để kích hoạt onclick và các sự kiện khác nhằm mô phỏng hoạt động của liên kết nút. Ví dụ dưới đây có thể được cải thiện và xóa khỏi HTML, nhưng đây chỉ là minh họa cho ý tưởng:

    Tiếp tục

    • Đơn giản (đối với các yêu cầu cơ bản) và bảo toàn ngữ nghĩa mà không yêu cầu hình thức bổ sung.
    • Vì là nút thực nên nó cũng sẽ hoạt động giống như nút thực (ví dụ: hành vi có thể kéo và/hoặc mô phỏng nhấp chuột khi nhấn phím cách khi một hành động được kích hoạt).
    • Yêu cầu JavaScript, nghĩa là khó truy cập hơn. Điều này không lý tưởng cho một phần tử cơ bản (chính) chẳng hạn như một liên kết.
    Giải pháp 3: Anchor (liên kết) được tạo kiểu như một nút.

    Nếu bạn muốn tránh sử dụng một biểu mẫu hoặc nội dung nhập và đang tìm kiếm liên kết tới một nút, bạn có thể tạo nút đẹp sử dụng trình bao bọc div, neo và thẻ h1. Bạn có thể muốn điều này để có thể tự do đăng liên kết lên trang của mình. Điều này đặc biệt hữu ích cho các nút được căn giữa theo chiều ngang và những nút có văn bản được căn giữa theo chiều dọc bên trong chúng. Đây là cách thực hiện:

    Cái nút!

    Sau đó, trong CSS, kiểu dáng của bạn sẽ trông như thế này:

    Trình bao bọc nút liên kết ( chiều rộng: 200px; chiều cao: 40px; bóng hộp: inset 0px 1px 0px 0px #ffffff; bán kính đường viền: 4px; màu nền: #097BC0; bóng hộp: 0px 2px 4px màu xám; hiển thị: block; border:1px Solid #094BC0; ) .link-button-wrapper > a ( hiển thị: bảng nội tuyến; con trỏ: con trỏ; trang trí văn bản: none; chiều cao: 100%; chiều rộng:100%; ) .link-button -wrapper > a > h1 ( lề: 0 tự động; hiển thị: ô bảng; căn chỉnh dọc: giữa; màu: #f7f8f8; cỡ chữ: 18px; họ phông chữ: cabinregular; căn chỉnh văn bản: trung tâm; )

    Liên kết liên kết

    Nút, nút a(vị trí:tương đối;) nút a(trên:0;trái:0;dưới:0;phải:0;)

    @Nicolas, sau khi làm việc cho tôi, giống như bạn, không có type="button" , điều này khiến nó bắt đầu hoạt động giống như một kiểu gửi. Vì tôi đã có một loại submit.it nên loại này không hiệu quả với tôi.... và bây giờ bạn có thể thêm một lớp vào nút hoặc để có được bố cục cần thiết:

    Bấm vào đây

    Nếu bạn muốn tạo một nút dùng cho URL ở bất cứ đâu, hãy tạo một lớp nút cho điểm neo.

    A.button ( nền-color: #999999; color: #FFFFFF !important; con trỏ: con trỏ; hiển thị: khối nội tuyến; font-weight: đậm; đệm: 5px 8px; căn chỉnh văn bản: giữa; -webkit-border- bán kính: 5px; bán kính đường viền: 5px; ) .button:hover ( text-trang trí: none; )

    Tôi biết đã có nhiều câu trả lời được gửi nhưng dường như không có câu trả lời nào giải quyết được vấn đề. Đây là cách tiếp cận giải pháp của tôi:

    • Sử dụng phương pháp mà OP đã bắt đầu. Điều này hoạt động rất tốt, nhưng đôi khi nó thêm? tới URL. Vấn đề chính là? .
    • Sử dụng jQuery/JavaScript để thực thi liên kết sau khi bật JavaScript, vậy? không được thêm vào URL. Nó sẽ quay trở lại phương pháp này mà không gặp vấn đề gì đối với một tỷ lệ rất nhỏ người dùng không có JavaScript.
    • Mã JavaScript sử dụng tính năng ủy quyền sự kiện để bạn có thể đính kèm trình xử lý sự kiện trước hoặc . Trong ví dụ này, tôi đang sử dụng jQuery vì nó nhanh và đơn giản nhưng có thể được thực hiện bằng JavaScript "vanilla".
    • Mã JavaScript ngăn chặn hành động mặc định và sau đó đi theo liên kết được chỉ định trong thuộc tính hành động.
    Ví dụ về JSBin (đoạn mã không thể theo liên kết)

    // Nghe bất cứ gì nhấp vào một phần tử trong tài liệu với `link` class $(document).on("click", ".link", function(e) ( // Ngăn chặn hành động mặc định (ví dụ: gửi biểu mẫu) e.preventDefault( ); // Lấy URL được chỉ định dưới dạng var url = e.target.parentElement.action; window.location = url; )); Nút biểu mẫu dưới dạng liên kết Liên kết

    Bạn sử dụng nó, ừm... à, khi bạn muốn đặt một nút trên một trang mà người dùng có thể nhấp vào, phải không? Thật không may, mọi thứ phức tạp hơn một chút. Về nguyên tắc, điều này gần đúng với sự thật, nhưng chúng ta hãy nghiên cứu vấn đề sâu hơn.

    Bản thân phần tử trông như thế này:

    Làm việc gì đó

    Kết quả phổ biến nhất của việc nhấp vào nội dung nào đó trên trang web là gì? Điều hướng đến một URL mới như thể bạn đã nhấp vào một liên kết ( phần tử ).

    Bản thân phần tử không thể làm được điều này. Đã có rất nhiều cuộc thảo luận về việc cho phép "href ở mọi nơi", nhưng không có kết quả gì.

    Khi bạn nhấn nút, thực tế hành động nhất định, nếu ngữ cảnh thích hợp được sử dụng...

    Nút là một thành phần biểu mẫu

    Biểu mẫu web có thể chứa các nút để thực hiện hành động (xác nhận). Bạn có thể nghĩ nó trông giống như thế này:

    Phần tử shell, theo mặc định, hoạt động chính xác như được hiển thị ở trên.

    Nộp

    Tuy nhiên, biểu mẫu cũng có thể có nút hủy. Bạn có thể sao chép loại hành động của nút bằng cách thay đổi hành vi mặc định từ thực hiện (xác nhận) hành động thành hủy:

    Cài lại

    Nhấp vào nút này sẽ xóa tất cả các trường nhập (và vùng văn bản) khác khỏi khối cha mẹ.

    Các nút có thể chứa nội dung

    Lý do chính để sử dụng một phần tử là vì nó chứa cả thẻ mở và thẻ đóng (). Điều này có nghĩa là nó có thể được phân biệt với bất kỳ mã nào khác. Trong thực tế thường xảy ra tình huống sau:

    Xác nhận

    Chỉ cần nó tồn tại, nội dung hỗn hợp này sẽ được hiển thị trên màn hình.

    Theo như tôi có thể nói, không có hạn chế cụ thể nào về những gì bạn có thể đặt bên trong một nút, vì vậy bạn có thể đặt bất cứ thứ gì bạn muốn vào đó, tạo ra một số nút thực sự lạ mắt. Cũng có thể sử dụng các phần tử giả.

    Tuy nhiên, bây giờ hãy tạm dừng chủ đề về phong cách các trình duyệt khác nhau thường có các kiểu đặc biệt áp dụng cho các nút. Nếu muốn, bạn có thể giữ lại các kiểu được trình duyệt áp dụng hoặc bạn có thể xóa chúng hoàn toàn và khi đó kiểu mặc định của bạn sẽ ghi đè kiểu của trình duyệt.

    Xin lưu ý: “nếu một nút không có href hợp lệ thì đó chỉ là một phần tử”

    Hãy nhớ rằng tôi đã viết trước đó rằng chủ đề này mang lại cho tôi niềm vui thực sự. Đây chính là điều đã truyền cảm hứng cho tôi viết bài này. Tôi tưởng tượng mình sẽ vui sướng biết bao khi chứng kiến ​​nhiều sự việc khác nhau. Chẳng hạn như:

    Tôi đã chán mấy cái nút này rồi.

    Rất có thể, đoạn mã trên có nghĩa như sau: Tôi sẽ nhấp vào nút để làm điều gì đó với JavaScript. Dù sao, điều này có vẻ tốt hơn so với sử dụng kiểu thông thường vì bạn có khả năng thay đổi giao diện con trỏ và tất cả các kiểu khác theo mặc định.

    Bên ngoài tôi vô dụng.

    Tuy nhiên, nó vẫn có vẻ tốt hơn

    Ngay cả khi nó không làm bất cứ điều gì khi ở bên ngoài , theo tôi, phần tử này vẫn được sử dụng tốt hơn cho các hành động khác không yêu cầu chuyển sang trang khác. Nếu có thì chúng tốt hơn các liên kết không có thật.

    Khỏe. Hãy chèn một số JavaScript

    Đây có lẽ là Quyết định tốt nhất. Nếu JavaScript là cần thiết cho bất kỳ hành động nào liên quan đến nhấp chuột, thì về nguyên tắc, đối với một phần tử, bạn có thể thực hiện mà không cần chạy JS.

    Nhưng chúng ta có thể làm như sau:

    // 1. Tạo một nút var nút = document.createElement("button"); nút.innerHTML = "Làm gì đó"; // 2. Đặt nó var body = document.getElementsByTagName("body"); body.appendChild(nút); // 3. Thêm quá trình xử lý action Button.addEventListener ("click", function() ( Alert("did something"); ));

    Bạn có thể dễ dàng tạo một phần "nút thêm" trong quy trình làm việc JavaScript của mình.

    Khi nào là tốt nhất để sử dụng liên kết?

    Nếu bạn có bất kỳ chuyển tiếp siêu văn bản nào sang các trang khác thì sẽ hợp lý hơn khi định dạng chúng bằng một liên kết để bạn có thể sử dụng neo. Ngay cả khi bạn sử dụng lại hành vi của nó thông qua JavaScript.

    Đây là một cải tiến tiến bộ tốt nhất của nó. Ví dụ:

    • Nút tìm kiếm thường sẽ khiến các tập lệnh tìm kiếm Ajax chạy - trong khi một liên kết có thể chỉ trỏ đến một trang tìm kiếm;
    • Nút "xuất bản" khởi chạy bước tiếp theo xuất bản thứ gì đó mà người dùng cần - nhưng liên kết có thể đơn giản dẫn đến trang / xuất bản /;
    • Nút có hình thu nhỏ của hình ảnh sẽ mở một bảng riêng biệt nơi hình ảnh được hiển thị trên đó kích thước lớn hơn— và liên kết có thể chỉ đơn giản là URL tới hình ảnh lớn hơn đó.

    Nếu vẫn thất bại, hãy chèn một nút bằng JavaScript.

    Các vấn đề liên quan

    Bạn có thể kết thúc với một cái gì đó tương tự như những gì tôi đã làm!

    Tôi ổn

    Nhưng bản thân bạn vẫn chưa ổn lắm. MDN thảo luận chi tiết về vấn đề này:

    Xin lưu ý: Hãy cẩn thận khi đánh dấu liên kết bằng các nút chức năng. Các thao tác nút thường được gọi bằng phím cách, trong khi các thao tác liên kết được gọi bằng phím Enter.

    Bạn cũng sẽ cần thêm một phím xử lý hành động sẽ phản hồi khi nhấn phím cách để đảm bảo tính nhất quán với nút ban đầu.

    Vâng đó là tất cả. Và ừm... hãy làm những việc tương tác đúng cách.

    Bản dịch của bài viết “Khi nào nên sử dụng phần tử nút” được nhóm dự án thân thiện chuẩn bị.

    Bản thân nút này không thể tạo thành một liên kết; HTML cấm kết hợp các phần tử (cũng như ) và . Vì vậy, bạn không thể lồng một nút vào một liên kết hoặc một liên kết vào một nút. Có ba cách để đảm bảo rằng khi bạn nhấp vào nút, nút đó sẽ mở ra một trang web.

    Sử dụng HTML

    Đặt nút bên trong phần tử và đối với biểu mẫu, chúng tôi chỉ định thuộc tính hành động với địa chỉ trang web (ví dụ 1). Ngoài ra bạn có thể thêm thuộc tính mục tiêu với giá trị _blank thì trang web sẽ mở trong tab trình duyệt mới.

    Ví dụ 1. thuộc tính hành động

    Nút Theo dõi liên kết

    Trong ví dụ này, việc nhấp vào nút sẽ mở trang web new.html trong tab mới.

    Một hình thức không thể được đặt bên trong một hình thức khác. Trước khi thêm nút, hãy đảm bảo bạn chỉ có một biểu mẫu.

    Sử dụng CSS

    Vì nút không thể tạo thành một liên kết nên chúng tôi loại bỏ nó hoàn toàn và tạo kiểu cho liên kết sao cho nó trông giống như một nút. Ví dụ 2 hiển thị lớp btn khi thêm nó vào một phần tử liên kết thay đổi thiết kế của nó.

    Nút .btn ( display: inline-block; /* Phần tử khối nội tuyến */ nền: #8C959D; /* Màu nền xám */ màu: #fff; /* Màu văn bản trắng */ phần đệm: 1rem 1,5rem; /* Lề xung quanh văn bản */ text-trang trí: none; /* Xóa phần gạch chân */ border-radius: 3px; /* Làm tròn các góc */ ) Theo liên kết

    Kết quả ví dụ này thể hiện trong hình. 1.

    Sử dụng JavaScript

    Bạn có thể sử dụng sự kiện onclick để điều hướng đến một trang web được chỉ định bằng cách thêm nó vào tệp . Bên trong onclick, chúng tôi viết document.location và dưới dạng giá trị là địa chỉ của trang web mong muốn (ví dụ 3). Hãy chú ý đến sự kết hợp của dấu ngoặc kép; địa chỉ trang web được đặt trong dấu ngoặc đơn.