javascript - template - responsive web design響應式網頁設計學習手冊pdf




在更換頁面後,在選擇的下拉菜單上保留所選的選項 (3)

所以我已經建立了我的第一個響應網站,但在移動設備上的菜單有問題。 這一切都有效,所以當您使用手機時,您可以從下拉列表中選擇一個選項(下面的HTML),它會帶您到正確的頁面。 但是,當頁面加載時,默認回到'Home'列表中的第一個選項。

這意味著當您在另一個頁面上時,您不能選擇家庭。 但是,我需要的是當選擇選項,新的頁面加載為選定的一個,然後成為默認選項。 所以你可以使用下拉菜單回到主頁。

我以前沒有這樣做,所以希望它很簡單!

HTML:

 <form id="mobile_nav">
            <select id="mobile_menu">

<option value="/">Home</option>           
<option value="/page 1/">page 1</option>
<option value="/page 2/">page 2</option>
<option value="/page 3/"page 3</option>
<option value="/page 4/"page 4</option>
<option value="/page 5/"page 5</option>

            </select>
 </form>

JS:

 jQuery(document).ready(function() {
        nav();

          jQuery("#mobile_menu").val(location.pathname);

        jQuery("#mobile_menu").change(function() {
            document.location = jQuery(this).val();
        });

JS啟用移動設備上的下拉菜單。

讓我知道如果你需要更多的信息和感謝。


使用window.location.href來獲取當前位置並選擇它

 jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(window.location.href);
 });

您可以使用document.URL知道當前的URL。 將該URL與下拉列表中的值進行比較,您可以在頁面加載時選擇相應的選項。 例如。 你可以使用類似這樣的方法:

var currentURL = document.URL;
if (currentURL.indexOf("home"))
{
   $("#mobile_nav select").val("home");
}

這可能有助於:

jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(location.pathname)
});

這將嘗試將#mobile_menu的值設置為與位置(當前URL)的路徑部分相同。





responsive-design