Tạo nút chuyển trang trong html
answer Show 1804 HTMLCách HTML đơn giản là đặt nó vào vị trí
Nếu
cần, hãy đặt CSS Theo trực giác, bạn mong muốn có thể sử dụng CSSNếu CSS được cho phép, chỉ cần sử dụng một kiểu
Hoặc chọn một trong nhiều thư viện CSS như Bootstrap .
JavaScriptNếu JavaScript được cho phép, hãy đặt
1804 hữu ích 5 bình luận chia sẻ answer 486
486 hữu ích 5 bình luận chia sẻ answer 421 Nếu đó là sự xuất hiện trực quan của một nút mà bạn đang tìm kiếm trong thẻ neo HTML cơ bản thì bạn có thể sử dụng khung Bootstrap Twitter để định dạng bất kỳ liên kết / nút loại HTML phổ biến nào sau đây để xuất hiện dưới dạng nút. Xin lưu ý sự khác biệt trực quan giữa phiên bản 2, 3 hoặc 4 của khung:
Xuất hiện mẫu Bootstrap (v4) : Xuất hiện mẫu Bootstrap (v3) : Xuất hiện mẫu Bootstrap (v2) : 421 hữu ích 1 bình luận chia sẻ answer 139 Sử dụng:
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 cũng như không luôn hoạt động như mong đợi. Sử dụng một cách tiếp cận khác. 139 hữu ích 4 bình luận chia sẻ answer 113 Kể từ HTML5, các nút hỗ trợ
Hãy cẩn thận
Tham khảo: https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/button#attr-formaction Hỗ trợ trình duyệt: https://developer.mozilla.org/en-US/docs/Web/ HTML / Element / button # Browser_compabilities 113 hữu ích 5 bình luận chia sẻ answer 50 Nó là thực tế rất đơn giản và không sử dụng bất kỳ yếu tố hình thức. Bạn chỉ có thể sử dụng thẻ với một nút bên trong :). Như thế này:
Và nó sẽ tải href vào cùng một trang. Bạn muốn một trang mới? Chỉ cần sử dụng 50 hữu ích 2 bình luận chia sẻ answer 36 Nếu bạn đang sử dụng một biểu mẫu bên trong, hãy thêm thuộc tính type = "reset" cùng với phần tử nút. Nó sẽ ngăn chặn các hành động hình thức.
36 hữu ích 0 bình luận chia sẻ answer 25
25 hữu ích 5 bình luận chia sẻ answer 22 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 ở dạng.
Nhưng vấn đề với điều này là trong một số phiên bản của các trình duyệt phổ biến như Chrome, Safari và Internet Explorer, nó thêm một ký tự dấu hỏi vào cuối URL. Vì vậy, nói cách khác cho mã ở trên URL của bạn sẽ trông giống như thế này:
Có một cách để khắc phục điều này, nhưng nó sẽ yêu cầu cấu hình phía máy chủ. Một ví dụ sử dụng Apache Mod_rewrite sẽ là chuyển hướng tất cả các yêu cầu có dấu
Các cấu hình tương tự có thể khác nhau tùy thuộc vào máy chủ web và ngăn xếp được sử dụng. Vì vậy, một bản tóm tắt của phương pháp này: Ưu điểm:
Nhược điểm:
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 để bắt chước hành vi của một liên kết bằng một nút. Ví dụ dưới đây có thể được cải thiện và xóa khỏi HTML, nhưng nó chỉ đơn giản là để minh họa ý tưởng:
Ưu điểm:
Nhược điểm:
Giải pháp 3: Neo (liên kết) được tạo kiểu như một nút.Tạo kiểu liên kết như nút tương đối dễ dàng và có thể cung cấp trải nghiệm tương tự trên các trình duyệt khác nhau. Bootstrap làm điều này, nhưng nó cũng dễ dàng đạt được bằng cách sử dụng các kiểu đơn giản. Ưu điểm:
Nhược điểm:
Phần kết luậnGiải pháp số 1 ( Nút trong một biểu mẫu ) có vẻ như minh bạch nhất cho người dùng với công việc tối thiểu cần thiết. Nếu bố cục của bạn không bị ảnh hưởng bởi lựa chọn này và điều chỉnh phía máy chủ là khả thi, thì đây là một lựa chọn tốt cho các trường hợp khả năng truy cập là ưu tiên hàng đầu (ví dụ: liên kết trên trang lỗi hoặc thông báo lỗi). Nếu JavaScript không phải là trở ngại đối với các yêu cầu về khả năng truy cập của bạn, thì giải pháp số 2 ( JavaScript ) sẽ được ưu tiên hơn # 1 và # 3. Nếu vì một lý do nào đó, khả năng truy cập là quan trọng (JavaScript không phải là một tùy chọn) nhưng bạn đang ở trong tình huống thiết kế và / hoặc cấu hình máy chủ của bạn ngăn bạn sử dụng tùy chọn # 1, sau đó là giải pháp số 3 ( Neo theo kiểu nút ) là một giải pháp thay thế tốt giải quyết vấn đề này với tác động khả năng sử dụng tối thiểu. 22 hữu ích 0 bình luận chia sẻ answer 21 Bạn chỉ có thể đặt một thẻ xung quanh thành phần:
https://jsfiddle.net/hj6gob8b/ 21 hữu ích 5 bình luận chia sẻ answer 18 Có bất kỳ nhược điểm để làm một cái gì đó như sau?
Trường hợp 18 hữu ích 2 bình luận chia sẻ answer 16 Cách duy nhất để làm điều này (ngoại trừ ý tưởng hình thức khéo léo của BalusC!) Là thêm một Bạn đã xem xét phong cách một liên kết bình thường như một nút? Bạn không thể đạt được các nút cụ thể của hệ điều hành theo cách đó, nhưng đó vẫn là cách tốt nhất IMO. 16 hữu ích 5 bình luận chia sẻ answer 16 Tại sao không đặt nút của bạn bên trong thẻ tham chiếu, vd
Điều này dường như hoạt động hoàn hảo đối với tôi và không thêm bất kỳ thẻ% 20 nào vào liên kết, chỉ là cách bạn muốn. Tôi đã sử dụng một liên kết đến google để chứng minh. Tất nhiên bạn có thể bọc cái này trong một thẻ mẫu nhưng nó không cần thiết. Khi liên kết một tệp cục bộ khác, chỉ cần đặt nó vào cùng thư mục và thêm tên tệp làm tham chiếu. Hoặc chỉ định vị trí của tệp nếu trong không nằm trong cùng thư mục.
Điều này cũng không thêm bất kỳ ký tự nào vào cuối URL, tuy nhiên, nó có đường dẫn dự án tệp dưới dạng url trước khi kết thúc bằng tên của tệp. ví dụ Nếu cấu trúc dự án của tôi là ... .. biểu thị một thư mục - biểu thị một tập tin trong khi bốn | biểu thị một thư mục con hoặc tập tin trong thư mục cha .. công cộng Nếu tôi mở main.html thì URL sẽ là,
Tuy nhiên, khi tôi nhấp vào nút bên trong main.html để thay đổi thành junior.html, URL sẽ là,
Không có ký tự đặc biệt bao gồm ở cuối URL. Tôi hi vọng cái này giúp được. Nhân tiện - (% 20 biểu thị một khoảng trắng trong URL được mã hóa và chèn vào vị trí của chúng.) Lưu ý: Localhost: 0000 rõ ràng sẽ không phải là 0000 bạn sẽ có số cổng của riêng mình ở đó. Hơn nữa, cuối cùng? _Ijt = xxxxxxxxxxxxxx ở cuối main.html URL, x được xác định bởi kết nối của chính bạn nên rõ ràng sẽ không bằng của tôi.
16 hữu ích 0 bình luận chia sẻ answer 15 Đi cùng với những gì một vài người khác đã thêm vào, bạn có thể phát cuồng chỉ bằng cách sử dụng một lớp CSS đơn giản không có PHP, không có mã jQuery , chỉ có HTML và CSS đơn giản. Tạo một lớp CSS và thêm nó vào neo của bạn. Mã dưới đây.
Thế là xong. Nó rất dễ làm và cho phép bạn sáng tạo như bạn 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 ... Để biết thêm chi tiết, hãy xem trang web tôi tìm thấy trên này . 15 hữu ích 0 bình luận chia sẻ answer 14 @ Nicolas, sau đây làm việc cho tôi vì bạn không có
14 hữu ích 0 bình luận chia sẻ answer 13 Nếu bạn muốn tránh phải sử dụng một biểu mẫu hoặc đầu vào và bạn đang tìm kiếm một liên kết trông giống nút, bạn có thể tạo các liên kết nút đẹp mắt với trình bao bọc div, neo và Nút của bạn sẽ bao gồm ba phần lồng nhau: trình bao bọc div, neo và h2, như vậy:
Sau đó, trong CSS, kiểu dáng của bạn sẽ trông như vậy:
Đây là một jsFiddle để kiểm tra và chơi xung quanh nó. Lợi ích của thiết lập này: 1. Tạo hiển thị trình bao bọc div: khối giúp dễ dàng căn giữa (sử dụng lề: 0 tự động) và vị trí (trong khi là nội tuyến và khó định vị hơn và không thể định tâm).
Nó chắc chắn làm cho cuộc sống của tôi dễ dàng tạo kiểu một trang web di động cho màn hình có kích thước thay đổi. 13 hữu ích 1 bình luận chia sẻ answer 12 Một tùy chọn khác là tạo một liên kết trong nút:
Sau đó, sử dụng CSS để tạo kiểu cho liên kết và nút, để liên kết chiếm toàn bộ không gian trong nút (để người dùng không bấm nhầm):
Tôi đã tạo một bản demo ở đây . 12 hữu ích 2 bình luận chia sẻ answer 8 Nếu bạn muốn tạo một nút được sử dụng cho một URL ở bất cứ đâu, hãy tạo một lớp nút cho một neo.
8 hữu ích 0 bình luận chia sẻ answer 7 Tôi biết đã có rất nhiều câu trả lời được gửi, nhưng không ai trong số họ dường như thực sự giải quyết vấn đề. Đây là giải pháp của tôi:
Ví dụ về JSBin (đoạn mã không thể theo liên kết)
7 hữu ích 0 bình luận chia sẻ answer 5 Đối với HTML 5 và nút được tạo kiểu cùng với nền hình ảnh
5 hữu ích 1 bình luận chia sẻ answer 3 Ngoài ra, bạn có thể sử dụng một nút: Ví dụ: trong cú pháp ASP.NET Core :
3 hữu ích 0 bình luận chia sẻ answer 2 Tôi đã sử dụng điều này cho một trang web tôi hiện đang làm việc và nó hoạt động rất tốt!. Nếu bạn muốn một số kiểu dáng thú vị, tôi sẽ đặt CSS xuống đây.
Làm việc với JSFiddle tại đây . 2 hữu ích 0 bình luận chia sẻ answer 1 Những người đã trả lời bằng cách sử dụng
NHƯNG gần đây, tôi đã gặp một vấn đề khi tôi sử dụng một liên kết bên trong a Nút hiện được coi là / như một nút gửi (HTML5). Tôi đã thử làm việc một cách và đã tìm thấy phương pháp này. Tạo nút kiểu CSS như bên dưới:
Hoặc tạo một cái mới ở đây: Trình tạo nút CSS Và sau đó tạo liên kết của bạn với thẻ lớp được đặt tên theo kiểu CSS bạn đã tạo:
Đây là một câu đố: Fiddle 1 hữu ích 1 bình luận chia sẻ answer 1 Bạn cũng có thể đặt các nút Bằng cách này, bạn có thể có một nút khác trong cùng một biểu mẫu gửi biểu mẫu, trong trường hợp cần thiết. Tôi cũng nghĩ rằng điều này tốt hơn trong hầu hết các trường hợp so với việc đặt phương thức biểu mẫu và hành động thành một liên kết (trừ khi đó là dạng tìm kiếm tôi đoán ...) Thí dụ:
Bằng cách này, nút đầu tiên chuyển hướng người dùng, trong khi nút thứ hai gửi biểu mẫu. Hãy cẩn thận để đảm bảo nút không kích hoạt bất kỳ hành động nào, vì điều đó sẽ dẫn đến xung đột. Cũng như Arius đã chỉ ra, bạn nên lưu ý rằng, vì lý do trên, điều này không hoàn toàn được coi là HTML hợp lệ, theo tiêu chuẩn. Tuy nhiên, nó hoạt động như mong đợi trong Firefox và Chrome, nhưng tôi chưa thử nghiệm nó cho Internet Explorer. 1 hữu ích 4 bình luận chia sẻ answer 1 Bạn có thể sử dụng javascript:
Thay thế 1 hữu ích 0 bình luận chia sẻ answer 1 7 cách để làm điều đó:
1 hữu ích 0 bình luận chia sẻ answer 0 Nếu những gì bạn cần là nó sẽ trông giống như một nút, với sự nhấn mạnh vào hình ảnh gradient , bạn có thể làm điều này:
0 hữu ích 0 bình luận chia sẻ |