Hướng dẫn how to open a new html page on button click in html - làm thế nào để mở một trang html mới khi nhấp vào nút trong html

HTML

Cách HTML đơn giản là đặt nó vào

7 trong đó bạn chỉ định URL mục tiêu mong muốn trong thuộc tính

8.

Nếu cần thiết, đặt CSS

9 trên biểu mẫu để giữ nó trong dòng chảy với văn bản xung quanh. Thay vì

         www.example.com

0 trong ví dụ trên, bạn cũng có thể sử dụng

         www.example.com

1. Sự khác biệt duy nhất là yếu tố

         www.example.com

2 cho phép trẻ em.

Bạn trực giác mong đợi có thể sử dụng

         www.example.com

3 tương tự với yếu tố

         www.example.com

4, nhưng thật không may, thuộc tính này không tồn tại theo đặc điểm kỹ thuật của HTML.

CSS

Nếu CSS được phép, chỉ cần sử dụng

         www.example.com

4 mà bạn có kiểu trông giống như một nút sử dụng thuộc tính khác của

         www.example.com

6 (nó chỉ không được hỗ trợ trong Internet & NBSP; Explorer).

Go to Google

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Hoặc chọn một trong nhiều thư viện CSS như Bootstrap.

Go to Google

JavaScript

Nếu JavaScript được phép, hãy đặt

         www.example.com

7.

Thay vì

         www.example.com

8 trong ví dụ trên, bạn cũng có thể sử dụng

         www.example.com

2. Sự khác biệt duy nhất là yếu tố

         www.example.com

2 cho phép trẻ em.

Đã trả lời ngày 25 tháng 5 năm 2010 lúc 16:40May 25, 2010 at 16:40

BaluscbaluscBalusC

1.1M366 Huy hiệu vàng3575 Huy hiệu bạc3526 Huy hiệu đồng366 gold badges3575 silver badges3526 bronze badges

25

         www.example.com

Lưu ý rằng thuộc tính

Link
Button

1 rất quan trọng, vì mặc định giá trị bị thiếu của nó là trạng thái nút gửi.

Boiethios

33.9K14 Huy hiệu vàng121 Huy hiệu bạc170 Huy hiệu đồng14 gold badges121 silver badges170 bronze badges

Đã trả lời ngày 25 tháng 5 năm 2010 lúc 16:44May 25, 2010 at 16:44

AdamadamAdam

42.7K16 Huy hiệu vàng104 Huy hiệu bạc143 Huy hiệu đồng16 gold badges104 silver badges143 bronze badges

12

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 cơ bản HTML thì bạn có thể sử dụng khung công tác 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:

Link
Button

Bootstrap (V4) Xuất hiện mẫu:

Bootstrap (V3) Xuất hiện mẫu:

Bootstrap (v2) xuất hiện mẫu:

Đã trả lời ngày 5 tháng 12 năm 2012 lúc 8:59Dec 5, 2012 at 8:59

BernbernBern

7.6355 Huy hiệu vàng34 Huy hiệu bạc47 Huy hiệu đồng5 gold badges34 silver badges47 bronze badges

1

Use:

    Click me

Thật không may, đánh dấu này không còn hiệu lực trong HTML5 và sẽ không xác nhận 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.this markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected. Use another approach.

Hagyn

8926 Huy hiệu bạc14 Huy hiệu Đồng6 silver badges14 bronze badges

Đã trả lời ngày 25 tháng 5 năm 2010 lúc 16:42May 25, 2010 at 16:42

D'Arcy Rittichd'arcy RittichD'Arcy Rittich

163K38 Huy hiệu vàng284 Huy hiệu bạc280 Huy hiệu Đồng38 gold badges284 silver badges280 bronze badges

1

Kể từ HTML5, các nút hỗ trợ thuộc tính

Link
Button

2. Trên hết, không cần JavaScript hay mánh khóe.

  Go to Stack Overflow!

Hãy cẩn thận

• Phải được bao quanh bởi các thẻ
  7.
• Loại

  
           www.example.com

  2 phải là "gửi" (hoặc không xác định) - Tôi không thể làm cho nó hoạt động với loại "nút". Mà đưa ra điểm dưới đây.
• Ghi đè hành động mặc định trong một biểu mẫu. Nói cách khác, nếu bạn làm điều này trong một hình thức khác, nó sẽ gây ra xung đột.

Tham khảo: hình thành

Hỗ trợ trình duyệt :: Phần tử nút

Đã trả lời ngày 2 tháng 7 năm 2015 lúc 19:03Jul 2, 2015 at 19:03

EternalhoureternalhourEternalHour

8.0006 Huy hiệu vàng36 Huy hiệu bạc57 Huy hiệu đồng6 gold badges36 silver badges57 bronze badges

11

Nó thực tế rất đơn giản và không sử dụng bất kỳ yếu tố hình thức nào. Bạn chỉ có thể sử dụng thẻ bằng một nút bên trong :).

Như thế này:

Click me !

Và nó sẽ tải HREF vào cùng một trang. Muốn có một trang mới? Chỉ cần sử dụng

Link
Button

5.

CHỈNH SỬA

Vài năm sau, trong khi giải pháp của tôi vẫn hoạt động, hãy nhớ rằng bạn có thể sử dụng rất nhiều CSS để làm cho nó trông bất cứ điều gì bạn muốn. Đây chỉ là một cách nhanh chóng.

Đã trả lời ngày 11 tháng 2 năm 2014 lúc 15:29Feb 11, 2014 at 15:29

Lucian Minealucian MineaLucian Minea

1.27210 Huy hiệu bạc12 Huy hiệu đồng10 silver badges12 bronze badges

7

Nếu bạn đang sử dụng biểu mẫu bên trong, hãy thêm loại thuộc tính = "Đặt lại" cùng với phần tử nút. Nó sẽ ngăn chặn hành động hình thức.type="reset" along with the button element. It will prevent the form action.

Go to Google

0

Đã trả lời ngày 24 tháng 1 năm 2015 lúc 6:59Jan 24, 2015 at 6:59

Saravanabawasaravanabawasaravanabawa

1.5471 Huy hiệu vàng15 Huy hiệu bạc23 Huy hiệu đồng1 gold badge15 silver badges23 bronze badges

2

Go to Google

1

Đã trả lời ngày 25 tháng 5 năm 2010 lúc 16:41May 25, 2010 at 16:41

Ghoppeghoppeghoppe

21.1k3 Huy hiệu vàng29 Huy hiệu bạc20 Huy hiệu đồng3 gold badges29 silver badges20 bronze badges

5

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 trong một hình thức.

Go to Google

2

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 như thế này:

Go to Google

3

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 với một

Link
Button

6 theo URL tương ứng của họ mà không cần

Link
Button

6. Dưới đây là một ví dụ sử dụng .htaccess, nhưng có một chủ đề đầy đủ ở đây:Apache Mod_rewrite would be to redirect all requests with a trailing

Link
Button

6 to their corresponding URL without the

Link
Button

6. Here is an example using .htaccess, but there is a full thread here:

Go to Google

4

Các cấu hình tương tự có thể thay đổi 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:

Pros:

1. Đây là một nút thực, và về mặt ngữ nghĩa, nó có ý nghĩa.
2. Vì nó là một nút thực, nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và/hoặc bắt chước nhấp chuột khi nhấn thanh không gian khi hoạt động).
3. Không có JavaScript, không cần phong cách phức tạp.

Cons:

1. Trailing

   Link
   Button
   
   
   

   6 trông xấu xí trong một số trình duyệt. Điều này có thể được sửa bằng cách hack (trong một số trường hợp) bằng cách sử dụng POST thay vì nhận được, nhưng cách sạch sẽ là chuyển hướng phía máy chủ. Nhược điểm với chuyển hướng phía máy chủ là nó sẽ gây ra một cuộc gọi HTTP thêm cho các liên kết này vì chuyển hướng 304.
2. Thêm phần tử
   7
3. Định vị phần tử khi sử dụng nhiều hình thức có thể khó khăn và thậm chí còn trở nên tồi tệ hơn khi xử lý các thiết kế đáp ứng. Một số bố cục có thể trở nên không thể đạt được với giải pháp này tùy thuộc vào thứ tự của các yếu tố. Điều này cuối cùng có thể ảnh hưởng đến khả năng sử dụng nếu thiết kế bị ảnh hưởng bởi thách thức 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 để 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à loại bỏ khỏi HTML, nhưng chỉ đơn giản là để minh họa ý tưởng:

Go to Google

5

Pros:

1. Đơn giản (cho yêu cầu cơ bản) và giữ ngữ nghĩa trong khi không yêu cầu một hình thức bổ sung.
2. Vì nó là một nút thực, nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và/hoặc bắt chước nhấp chuột khi nhấn thanh không gian khi hoạt động).

Cons:

1. Yêu cầu JavaScript có nghĩa là ít tiếp cận hơn. Điều này không lý tưởng cho một phần tử cơ sở (cốt lõi) như một liên kết.

Giải pháp 3: neo (liên kết) được tạo kiểu như một nút.

Kiểu một liên kết như một 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 thực hiện điều này, nhưng nó cũng dễ dàng tự mình đạt được bằng cách sử dụng các phong cách đơn giản.

Pros:

1. Đơn giản (cho yêu cầu cơ bản) và hỗ trợ trình duyệt chéo tốt.
2. Không cần
   7 để làm việc.
3. Không cần JavaScript để làm việc.

Cons:

1. Semantic bị hỏng, bởi vì bạn muốn một nút hoạt động giống như một liên kết và không phải là một liên kết hoạt động như một nút.
2. Nó sẽ không tái tạo tất cả các hành vi của giải pháp #1. Nó sẽ không hỗ trợ hành vi tương tự như nút. Ví dụ, các liên kết phản ứng khác nhau khi bị kéo. Ngoài ra, trình kích hoạt liên kết "thanh không gian" sẽ không hoạt động mà không có một số mã JavaScript bổ sung. Nó sẽ thêm rất nhiều sự phức tạp vì các trình duyệt không nhất quán về cách chúng hỗ trợ các sự kiện

   
       Click me
   
   

   1 trên các nút.

Sự kết luận

Giải pháp số 1 (nút trong một biểu mẫu) có vẻ như minh bạch nhất đối với người dùng có 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 sự 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).Button in a form) seems like the most transparent for users with minimal work required. If your layout is not impacted by this choice and the server side tweak is feasible, this is a good option for cases where accessibility is the top priority (e.g. links on an error page or error messages).

Nếu JavaScript không phải là một trở ngại cho các yêu cầu khả năng tiếp cận của bạn, thì Giải pháp #2 (JavaScript) sẽ được ưu tiên hơn #1 và #3.JavaScript) would be preferred over #1 and #3.

Nếu vì một số lý do, 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 số 1, thì giải pháp số 3 (neo được tạo kiểu như một nút) là một 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.Anchor styled like a button) is a good alternative solve this problem with minimal usability impact.

Đã trả lời ngày 19 tháng 5 năm 2016 lúc 23:29May 19, 2016 at 23:29

Bạn có thể chỉ cần đặt một thẻ xung quanh phần tử:

Go to Google

6

https://jsfiddle.net/hj6gob8b/

Đã trả lời ngày 16 tháng 1 năm 2017 lúc 4:24Jan 16, 2017 at 4:24

8

Chỉ cần đặt nút của bạn bên trong thẻ tham chiếu, ví dụ:

Go to Google

7

Điều này dường như hoạt động hoàn hảo cho 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 một 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 có trong cùng một thư mục.

Go to Google

8

Điều này cũng không thêm bất kỳ ký tự nào vào đầu URL, tuy nhiên nó có đường dẫn dự án tệp là URL trước khi kết thúc với 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 phụ hoặc tệp trong thư mục chính
  while four | denote a sub directory or file in parent folder

..Public |||| ..html |||| |||| -Main.html |||| |||| -Secondary.html
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Nếu tôi mở tệp main.html, URL sẽ là,

Go to Google

9

Tuy nhiên, khi tôi nhấp vào nút bên trong Main.html để thay đổi thành thứ cấp.html, URL sẽ là,

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

0

Không có ký tự đặc biệt nào được bao gồm ở cuối URL.

Nhân tiện - (%20 biểu thị một không gian trong URL mà nó đượ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 bạn ở đó.

Hơn nữa,?

Có vẻ như tôi đang nêu một số điểm thực sự cơ bản, nhưng tôi chỉ muốn giải thích tốt nhất có thể.

Đã trả lời ngày 3 tháng 8 năm 2018 lúc 10:05Aug 3, 2018 at 10:05

C.GaddC.GaddC.Gadd

Phù hiệu 4043 Huy hiệu bạc113 silver badges11 bronze badges

0

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à thẻ

    Click me

2. Bạn có khả năng muốn điều này để bạn có thể tự do đặt liên kết xung quanh trang của bạn. Điều này đặc biệt hữu ích cho các nút định tâm theo chiều ngang và có văn bản tập trung theo chiều dọc bên trong chúng. Đây là cách:

Nút của bạn sẽ bao gồm ba mảnh lồng nhau: một trình bao bọc div, neo và H2, như vậy:

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

1

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

2

Đây là một jsfiddle để kiểm tra nó và chơi xung quanh nó.

Lợi ích của thiết lập này: 1. Làm cho màn hình trình bao bọc div: Khối giúp dễ dàng tập trung (sử dụng lề: 0 tự động) và vị trí (trong khi một nội tuyến và khó hơn để định vị và không thể tập trung).

1. Bạn chỉ có thể làm cho màn hình: Khối, di chuyển nó xung quanh và tạo kiểu cho nó như một nút, nhưng sau đó căn chỉnh theo chiều dọc bên trong nó trở nên khó khăn.

2. Điều này cho phép bạn tạo màn hình: Table Inline và Màn hình: Table-Cell, cho phép bạn sử dụng dọc-Align: Middle trên và trung tâm theo chiều dọc (luôn luôn đẹp trên một nút). Có, bạn có thể sử dụng đệm, nhưng nếu bạn muốn nút của mình thay đổi kích thước động, điều đó sẽ không sạch sẽ.

3. Đôi khi khi bạn nhúng trong một div, chỉ có thể nhấp vào văn bản, thiết lập này làm cho toàn bộ nút có thể nhấp.

4. Bạn không cần phải xử lý các biểu mẫu nếu bạn chỉ đang cố gắng chuyển sang trang khác. Các biểu mẫu có nghĩa là để nhập thông tin, và chúng nên được dành riêng cho điều đó.

5. Cho phép bạn làm sạch sẽ tạo kiểu cho kiểu nút và kiểu dáng văn bản từ nhau (lợi thế kéo dài? Chắc chắn, nhưng CSS có thể có vẻ ngoài khó chịu vì vậy thật tuyệt khi phân tách nó).

Nó chắc chắn làm cho cuộc sống của tôi dễ dàng tạo kiểu cho một trang web di động cho các màn hình có kích thước thay đổi.

Tylerh

21.3K60 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng60 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 13 tháng 8 năm 2014 lúc 3:49Aug 13, 2014 at 3:49

MomomomoMoMo

4993 Huy hiệu bạc12 Huy hiệu Đồng3 silver badges12 bronze badges

1

Đ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 mà không có PHP, không có mã jQuery, chỉ là HTML và CSS đơn giản.

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

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

3

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

4

Đó là nó. 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 điều này trên.

Đã trả lời ngày 3 tháng 12 năm 2013 lúc 5:09Dec 3, 2013 at 5:09

artieartieartie

2293 Huy hiệu bạc6 Huy hiệu đồng3 silver badges6 bronze badges

0

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 sự kiện JavaScript

    Click me

3 vào nút, điều này không tốt cho khả năng truy cập.

Bạn đã xem xét tạo kiểu 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.

Đã trả lời ngày 25 tháng 5 năm 2010 lúc 16:41May 25, 2010 at 16:41

PekkapekkaPekka

435K137 Huy hiệu vàng966 Huy hiệu bạc1080 Huy hiệu Đồng137 gold badges966 silver badges1080 bronze badges

4

Bảy cách để làm điều đó:

1. Sử dụng

   
       Click me
   
   

   4
2. Sử dụng

   
       Click me
   
   

   5
3. Sử dụng

   
       Click me
   
   

   6
4. Sử dụng

   
       Click me
   
   

   7
5. Sử dụng

   
       Click me
   
   

   8
6. Sử dụng hình thức HTMLform
7. Sử dụng thẻ neo HTMLanchor tag

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

5

Đã trả lời ngày 27 tháng 3 năm 2019 lúc 18:21Mar 27, 2019 at 18:21

Adnan Tokyadnan TokyAdnan Toky

1.6221 Huy hiệu vàng10 Huy hiệu bạc19 Huy hiệu đồng1 gold badge10 silver badges19 bronze badges

1

Đối với câu trả lời của Nicolas, những điều sau đây đã làm việc cho tôi vì câu trả lời đó không có

Link
Button

1 do nó bắt đầu hành xử như loại gửi ... vì tôi đã có một loại gửi. Nó không hoạt động với tôi ... và bây giờ bạn có thể thêm một lớp vào nút hoặc vào

         www.example.com

4 để có được bố cục cần thiết:

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

6

Đã trả lời ngày 21 tháng 7 năm 2017 lúc 5:59Jul 21, 2017 at 5:59

Bhawna Jainbhawna JainBhawna Jain

68110 Huy hiệu bạc27 Huy hiệu đồng10 silver badges27 bronze badges

Một tùy chọn khác là tạo một liên kết trong nút:

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

7

Sau đó, sử dụng CSS để tạo kiểu liên kết và nút, để liên kết chiếm toàn bộ không gian trong nút (do đó không có lỗi nhấp của người dùng):

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

8

Tôi đã tạo ra một bản demo ở đây.

Hãy nhớ rằng thông số kỹ thuật nói rằng điều này không hợp lệ vì các nút không nên chứa bất kỳ hậu duệ tương tác nào.

Đã trả lời ngày 16 tháng 1 năm 2014 lúc 4:28Jan 16, 2014 at 4:28

Lukeomlukeomylukeocom

3.2053 huy hiệu vàng17 Huy hiệu bạc 30 Huy hiệu Đồng3 gold badges17 silver badges30 bronze badges

3

Nếu bạn muốn tạo một nút được sử dụng cho URL ở bất cứ đâu, hãy tạo một lớp nút cho một mỏ neo.

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

9

Đã trả lời ngày 15 tháng 11 năm 2013 lúc 17:34Nov 15, 2013 at 17:34

MAAREKMAAREKMaarek

6726 Huy hiệu bạc6 Huy hiệu Đồng6 silver badges6 bronze badges

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ự gây ra vấn đề. Đây là giải pháp của tôi:

1. Sử dụng phương thức

   
     Go to Stack Overflow!
   

   1 mà OP đang bắt đầu. Điều này hoạt động thực sự tốt, nhưng đôi khi nó nối một

   Link
   Button
   
   
   

   6 vào URL.

   Link
   Button
   
   
   

   6 là vấn đề chính.
2. Giải pháp này hoạt động mà không có JavaScript được bật. Việc dự phòng sẽ thêm

   Link
   Button
   
   
   

   6 vào cuối URL.
3. Nếu JavaScript được bật thì bạn có thể sử dụng JQuery/JavaScript để xử lý theo liên kết, do đó

   Link
   Button
   
   
   

   6 không kết thúc được thêm vào URL. Nó sẽ hoàn thiện một cách liền mạch đối với phương thức
   7 cho phần rất nhỏ người dùng không bật JavaScript.
4. Mã JavaScript sử dụng Phái đoàn sự kiện để bạn có thể đính kèm Trình nghe sự kiện trước khi
   7 hoặc

   
            www.example.com

   2 tồn tại. Tôi đang sử dụng jQuery trong ví dụ này, bởi vì nó nhanh chóng và dễ dàng, nhưng nó cũng có thể được thực hiện trong JavaScript 'vani'.
5. Mã JavaScript ngăn chặn hành động mặc định xảy ra và sau đó tuân theo liên kết được đưa ra trong thuộc tính
   7
   8.

Ví dụ về JSBIN (đoạn mã không thể theo liên kết)

Go to Google

0

Go to Google

1

Đã trả lời ngày 5 tháng 5 năm 2015 lúc 22:58May 5, 2015 at 22:58

pseudosavantpseudosavantpseudosavant

6.8162 huy hiệu vàng35 huy hiệu bạc40 Huy hiệu đồng2 gold badges35 silver badges40 bronze badges

Tạo một nút bằng thẻ

         www.example.com

4 và thêm nội dung CSS thích hợp:

Đã trả lời ngày 28 tháng 6 năm 2020 lúc 11:11Jun 28, 2020 at 11:11

Kamil Kiełczewskikamil KiełczewskiKamil Kiełczewski

77.1K26 Huy hiệu vàng339 Huy hiệu bạc318 Huy hiệu đồng26 gold badges339 silver badges318 bronze badges

4

Ngoài ra, bạn có thể sử dụng một nút:

Ví dụ: trong cú pháp ASP.NET Core:

Go to Google

2

Đã trả lời ngày 21 tháng 11 năm 2016 lúc 13:07Nov 21, 2016 at 13:07

ElnazelnazElnaz

2.7983 huy hiệu vàng26 Huy hiệu bạc39 Huy hiệu đồng3 gold badges26 silver badges39 bronze badges

Những người đã trả lời bằng cách sử dụng các thuộc tính

Click me !

2 trên

Click me !

3 là hữu ích.

Nhưng sau đó, tôi đã gặp phải một vấn đề khi tôi sử dụng một liên kết bên trong

Click me !

4. then recently, I encountered a problem when I used a link inside a

Click me !

4.

Nút hiện được coi là như/là một nút gửi (HTML5). Tôi đã thử làm việc một cách xung quanh và đã tìm thấy phương pháp này.

Tạo nút Kiểu CSS như bên dưới:

Go to Google

3

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 một thẻ lớp được đặt tên theo kiểu CSS mà bạn đã thực hiện:

Go to Google

4

Đây là một fiddle:

JSfiddle

Đã trả lời ngày 23 tháng 7 năm 2014 lúc 8:50Jul 23, 2014 at 8:50

Logan Waynelogan WayneLogan Wayne

5.98116 Huy hiệu vàng31 Huy hiệu bạc48 Huy hiệu đồng16 gold badges31 silver badges48 bronze badges

1

Bạn cũng có thể đặt các nút

Click me !

5 thành "nút" (nó làm cho nó không gửi biểu mẫu), sau đó làm tổ bên trong một liên kết (làm cho nó chuyển hướng người dùng).

Bằng cách này, bạn có thể có một nút khác trong cùng một hình thức 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 là thích hợp hơn trong hầu hết các trường hợp trong việc đặt phương thức biểu mẫu và hành động là một liên kết (trừ khi đó là dạng tìm kiếm tôi đoán ...)

Example:

Go to Google

5

Bằng cách này, nút đầu tiên chuyển hướng người dùng, trong khi 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 được nói một cách nghiêm ngặt đượ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 & nbsp; Explorer.

Đã trả lời ngày 10 tháng 12 năm 2014 lúc 15:21Dec 10, 2014 at 15:21

Anders Martinianders MartiniAnders Martini

7461 Huy hiệu vàng12 Huy hiệu bạc29 Huy hiệu đồng1 gold badge12 silver badges29 bronze badges

6

Đối với HTML 5 và nút được tạo kiểu cùng với nền hình ảnh

Go to Google

6

Đã trả lời ngày 24 tháng 9 năm 2014 lúc 22:30Sep 24, 2014 at 22:30

Anees Hameedanees HameedAnees Hameed

5.2721 Huy hiệu vàng35 Huy hiệu bạc41 Huy hiệu đồng1 gold badge35 silver badges41 bronze badges

1

Bạn có thể sử dụng JavaScript:

Go to Google

7

Thay thế

Click me !

6 bằng trang web của bạn và đảm bảo bao gồm

Click me !

7 trước URL.

Đã trả lời ngày 25 tháng 2 năm 2019 lúc 18:51Feb 25, 2019 at 18:51

HayzhayzHayz

1664 Huy hiệu Đồng4 bronze badges

0

Trong JavaScript

Go to Google

8

Trong HTML

Go to Google

9

Đã trả lời ngày 4 tháng 5 năm 2019 lúc 5:32May 4, 2019 at 5:32

Nhập

Click me !

8 và nhấn Enter trong bảng điều khiển trình duyệt của bạn. Sau đó, bạn có thể hiểu rõ ràng những gì

Click me !

9 chứa:

0

Bạn có thể đặt bất kỳ giá trị nào từ đây.

Vì vậy, để chuyển hướng trang khác, bạn có thể đặt giá trị

Go to Google

00 với liên kết của bạn.

1

Trong trường hợp của bạn:

2

Đã trả lời ngày 2 tháng 7 năm 2019 lúc 9:05Jul 2, 2019 at 9:05

Nasir Khannasir KhanNasir Khan

7131 Huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng1 gold badge8 silver badges22 bronze badges

HTML Trả lời: Nếu bạn muốn tạo nút HTML hoạt động như một liên kết, hãy sử dụng hai thuộc tính phổ biến cho nó:

         www.example.com

4 và/hoặc

Go to Google

02:

3

Or...

"HREF" là một phần của thuộc tính

         www.example.com

4. Nó giúp các liên kết trực tiếp:

Go to Google

04

Đã trả lời ngày 19 tháng 2 năm 2021 lúc 18:19Feb 19, 2021 at 18:19

Tôi đã sử dụng nó cho một trang web mà tôi hiện đang làm việc và nó hoạt động rất tốt! Nếu bạn cũng muốn một số kiểu dáng mát mẻ, tôi sẽ đặt CSS xuống đây.

4

5

Một jsfiddle đang làm việc ở đây.

Đã trả lời ngày 16 tháng 11 năm 2014 lúc 1:39Nov 16, 2014 at 1:39

Jasch2Jasch2Jasch2

4552 Huy hiệu vàng7 Huy hiệu bạc22 Huy hiệu đồng2 gold badges7 silver badges22 bronze badges

Cách tiếp cận bootstrap cũng hoạt động với Bulma.

6

Đã trả lời ngày 22 tháng 9 năm 2021 lúc 19:42Sep 22, 2021 at 19:42

1

Làm cách nào để tạo một nút có thể nhấp, hãy mở một trang khác trong HTML?

Làm thế nào để bạn mở một trang mới trên một nút bấm?

Để mở một liên kết trong một tab mới trên nút bấm:..

Chọn phần tử nút ..

Thêm trình nghe sự kiện vào nút ..

Sử dụng cửa sổ.mở () phương thức để mở liên kết trong một tab mới ..

Làm thế nào để bạn tạo một nút trong HTML Mở một tab mới?

Thêm phần tử HTML vào khối trang của bạn: Viết liên kết HTML / nút của riêng bạn. Đó là thuộc tính này (Target = "_ Blank") khiến liên kết mở trong một tab mới. Write your own HTML link / button. It is this attribute (target="_blank") that causes the link to open in a new tab.

Làm thế nào để bạn thêm một trang mới trong HTML?