如何在沒有插件的情況下導航<select>列表？

我已經嘗試過幾種解決方案，但都沒有工作。
我設法使導航列表爲<select><option>名單，但沒有隻與網頁的名稱，沒有他們的URL的跡象如何在沒有插件的情況下導航<select>列表？

任何想法如何，我可以做一個全功能的選擇列表導航，無需外部插件？

（理想的解決方案是網址會顯示爲option一個value這樣我就可以使用JavaScript頁面導航頁）

2012-06-27 ilyo

你能提供一些你想要的更多細節嗎？也許是來自網絡上其他地方的一個例子，或者截圖？你在找這樣的東西：[link]（http://lab.artlung.com/dropdown/）？ –

@SpencerHoffman是的！到目前爲止，我已經設法實現的是自定義菜單項的列表，沒有任何指示他們的URL。 – ilyo

如果您還沒有自定義腳本加載器，添加如下內容到主題functions.php：

function addScripts() { 

    if (!is_admin()) { 

     wp_register_script('navScript', get_template_directory_uri() . "/js/navScript.js")); 

     wp_enqueue_script('navScript'); 

} 
} 

add_action('wp_print_scripts', 'addScripts');

在你的WordPress的儀表板，去Appearance->我的用戶控件，創建一個新的窗口小部件（給它一個名稱，選擇HTML作爲類型），並添加您的版本這（留下div，因爲你可以包含/風格，你喜歡）：

<form> 

    <select id="superNav"> 
     <option value="">Choose a destination...</option> 
     <option value="http://www.yahoo.com/">YAHOO</option> 
     <option value="http://www.google.com/">GOOGLE</option> 
     <option value="http://www.amazon.com/">AMAZON</option> 
    </select> 

</form>

然後，在Appearance-> Widgets下，將您的新自定義小部件添加到任何您想要的位置。在navScript.js中（在適當的模板JS目錄中，如上所述），你可以添加類似於下面的代碼的代碼。我用jQuery這樣做，但它很容易使用addEventListener（返工對於普通的JavaScript）：

$(document).ready(function() { 

    $('#superNav').change(function() { 

     var curUrl = $("option:selected", this).val(); 

     if (curUrl) { 

      window.open(curUrl, '_top') 

     } 

    });

來源

2012-06-27 08:35:36

你看到這個問題是關於WordPress的？ – ilyo

另外，它被認爲是不好的做法，使用內嵌Javascript的，你應該使用事件綁定，而不是 – ilyo

對不起。根據你以前的陳述「是的！」，你讓我相信這就是你所需要的。我非常瞭解最佳實踐，並很樂意更新我的答案。 –

你可以嘗試使用get_pages($args)函數獲取的頁面和各自的鏈接列表。然後使用@Spencer Hoffman列出的jQuery應該會讓你相信你正在尋找的東西。

http://codex.wordpress.org/Function_Reference/get_pages#Displaying_pages_in_dropdown_list

這個例子應該是一個很好的例子由（除了內嵌的JavaScript）去。

來源

2012-06-27 15:01:55 Nick

如何在沒有插件的情況下導航<select>列表？

回答

相關問題