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

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

         www.example.com

         www.example.com

         www.example.com

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

         www.example.com

         www.example.com

CSS

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

         www.example.com

         www.example.com

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

Thay vì

         www.example.com

         www.example.com

         www.example.com

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

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.

Link Button

Bootstrap [V4] Xuất hiện mẫu:

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.

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

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

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

Go to Google 0

Go to Google 1

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

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

Link
Button

Link
Button

Link
Button

Go to Google

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

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

Go to Google 6

//jsfiddle.net/hj6gob8b/

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

Đ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

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;
}

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ể.

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;
}

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

    text-decoration: none;
    color: initial;
}

Đâ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.

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.

Click me 4

    Click me

    Click me

    Click me

    Click me

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

    text-decoration: none;
    color: initial;
}

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

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

    text-decoration: none;
    color: initial;
}

Link Button 6 vào URL.

Link
Button

Link
Button

Link
Button

         www.example.com

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

Go to Google

Go to Google

Đã 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

Go to Google 2

Click me ! 2 trên

Click me !

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 !

Click me !

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

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

Đây là một fiddle:

JSfiddle

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

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.

Go to Google 6

Go to Google 7

Thay thế

Click me !

Click me !

Go to Google 8

Trong HTML

Go to Google

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

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 !

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

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

Go to Google 02:

Or...

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

         www.example.com

Go to Google

Đã 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.

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.

Đã 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?