HTML命令提示符導航

Question

我有興趣爲我的網站製作命令提示符樣式的導航工具。我正在研究JQuery終端插件，但大部分信息只是在我頭上。我只是想讓一個閃爍的光標顯示一些指令。然後用戶可以輸入以下內容：家庭，聯繫我們，關於等等，並被帶到相應的頁面。

這方面的一個例子是http://ohmycode.fr/

而是有許多的命令，我只想型住宅，它會帶我到我的主頁。聯繫我們，它會帶我到我的聯繫頁面等

謝謝

Answer 1

試試這個

HTML

<form id="command-prompt"> 
    <input type="text"/> 
    <input type="submit" value="Go"/> 
</form> 

的JavaScript

$("#command-prompt input[type='submit']").click(function(event){ 
    event.preventDefault(); 
    var value = $("#command-prompt input[type='text']").val(); 
    window.location.pathname = "/" + value + ".html"; 
}); 

對於爲例，如果你嘗試在輸入中輸入內容並點擊開始，您將轉至www.yourdomain.com/about.html

Answer 2

我做了這個搗鼓你：

fiddle

只是隱藏通過CSS輸入邊框（和使用更多的CSS樣式，如果你願意的話）：

input#my_console { 
    border: 0; 
} 
input#my_console:focus { 
    outline: 0; 
} 

使用對焦在輸入上使光標閃爍：

$("#my_console").focus(); 

使用jQuery keyup事件來檢查您的輸入字段中是否使用了返回鍵。返回鍵的keyCode是「13」。然後將輸入字段的值與您所需的關鍵字進行比較。如果輸入的文本與關鍵字匹配將用戶轉發到其他頁面，請使用window.location。如果它不匹配任何關鍵字，則輸出一些錯誤消息。

$("#my_console").on("keyup", function (e) { 
    var code = e.keyCode || e.which; 
    var my_input = $("#my_console").val(); 

    if (code == 13) { 
     if (my_input == "home") { 
      window.location = "index.html"; 
     } else if (my_input == "contact") { 
      window.location = "contact.html"; 
     }else{ 
      $("#my_console").val("unknown keyword"); 
      $("#my_console").select(); 
     } 
    } 
});