如何使按鈕導航到不同頁面？

Question

我想有一個帶有導航按鈕欄的主頁，每個按鈕在我的代碼中為我打開一個不同的頁面，並有一個“返回”按鈕以返回到主頁。 我不知道如何使頁面的html代碼在主頁中看不到，並且當我單擊按鈕時它們會出現（我更喜歡使用向右滑動動畫），而當我單擊“返回”按鈕時，它將向左滑動回到主屏幕，這是我的代碼，例如：

 nav.nav-center ul { text-align: center; } nav.nav-center ul li { display: inline; float: none; } nav.nav-center ul li a { display: inline-block; }

 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Optional theme --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <meta name="viewport" content="width=device-width, initial scale=1"> </head> <style> </style> <body> <nav class="nav-center" role="navigation"> <div class="nav-wrapper container"> <ul> <li><a class="waves-effect waves-light btn">Button1</a></li> <li><a class="waves-effect waves-light btn">Button2</a></li> </ul> </div> </nav> <h4>This is supposed to be shown only after clicking the button1</h4> <p>i want the button to navigate the page so this will be shown only after button 1 is clicked</p> <h4>This is supposed to be shown only after clicking the button2</h4> <p>i want the button to navigate the page so this will be shown only after button 2 is clicked</p> </body> </html>

我只想在主頁上看到按鈕，當我單擊它們時，將顯示不帶按鈕的新頁面，並帶有返回到主頁的按鈕，並具有應根據每個按鈕顯示的文本。 我現在所擁有的是立即顯示整個html代碼，並且沒有對頁面的划分

Answer 1

您必須創建單獨的HTML文件才能在不同的路線上顯示。 如果您是初學者，我已在此鏈接上更改了代碼

在線代碼

編輯：解釋代碼

為button1 button2（egahtml b.html）創建兩個文件，並相應地粘貼其內容。

然后在index.html中，刪除已復制到a.html和b.html的代碼。

在index.html中-

<a href="a.html" class="waves-effect waves-light btn">Button1</a>
<a href="b.html" class="waves-effect waves-light btn">Button2</a>

它應該工作。

如何使按鈕導航到不同頁面？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-01-15 08:56:20

如何使按鈕導航到不同頁面？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-01-15 08:56:20

解決方案1
1 已采納 2019-01-15 08:56:20