Отображение страницы JS в зависимости от URL-адреса

Question

У меня есть сайт, который загружает все содержимое в один файл, а затем изменяет весь стиль divs на display:none отдельно от выбранного в меню.

Что бы я хотел, это добавить хеш к URL-адресу, который затем будет указывать на один из div и скрыть всех остальных, как то, что происходит при нажатии кнопок меню.

Просмотр сайта вместе с JS, CSS и HTML здесь: http://jsfiddle.net/5vL2LjLe/2/

Это JavaScript я начал добавлять, чтобы проверить, если URL содержал определенный текст:

//shows page depending on url 
$(document).ready(function() { 
    if(window.location.href.indexOf("#lgc") > -1) { 
     console.log("#lgc"); 
    } 
    else if(window.location.href.indexOf("#webcams") > -1) { 
     console.log("#webcams"); 
    } 
    else if(window.location.href.indexOf("#rasp") > -1) { 
     console.log("#rasp"); 
    } 
    else if(window.location.href.indexOf("#charts") > -1) { 
     console.log("#charts"); 
    } 
    else if(window.location.href.indexOf("#dunstablepara") > -1) { 
     console.log("#dunstablepara"); 
    } 
}); 

Спасибо!

Answer 1

Прямо сейчас, вы используете функцию, чтобы показать и скрыть DIVs, которые определены при настройке слушателя событий. Однако то, что вы хотите сделать, в основном имеет тот же эффект, который назначает (например, по имени) раздел, который вы хотите показать или скрыть.

Один из способов сделать это - создать функцию, в которой вы можете предоставить префикс идентификатора, и он будет скрывать и показывать соответствующие части страницы. В основном это происходит из вашего существующего обработчика «menu-clicker».

function switchToDiv(idprefix) { 
    var navItem = $('#' + idprefix + '-link'), 
     pageDiv = $('#' + idprefix + '-page'); 

    if (!(navItem.hasClass('active'))) { 
    //hide other pages and show the linked one 
    $("div[id*='-page']").hide(); 
    pageDiv.show(); 

    //set all links inactive and the clicked on active 
    $("li[id*='-link']").removeClass("active"); 
    navItem.addClass("active"); 
    } 
} 

Вторая часть - это то, как вы запускаете эту функцию. В вашем коде есть набор операторов «if» в анонимной функции, называемой $ (документ) .ready. Во-первых, потому что вы в основном выполняете набор сравнений строк, оператор switch лучше подходит. Кроме того, поскольку вы можете использовать функцию в другое время, вероятно, стоит указать ей имя.

function loadPageFromHash() { 
    switch (window.location.hash) { 
     case '#lgc': 
      switchToDiv('lgcweather'); 
      break; 
     case '#rasp': 
      switchToDiv('rasp'); 
      break; 
     case '#charts': 
      switchToDiv('charts'); 
      break; 
     case '#dunstablepara': 
      switchToDiv('dunstablepara'); 
      break; 
     case '#webcams': 
      switchToDiv('webcam'); 
      break; 
     default: 
      // do anything you need to in order to load the home page 
    } 
} 

Наконец, вы можете вызвать эту функцию при загрузке страницы, и когда хэш изменения URL, если это желательно.

//shows page depending on url 
$(document).ready(loadPageFromHash); 
$(window).on('hashchange',loadPageFromHash); 

Альтернатива высказывания «переключатель», чтобы использовать словарь для отображения URL # текста в «префикс», например:

function loadPageFromHash() { 
    var mappings = { 
     '#lgc': 'lgcweather', 
     '#rasp': 'rasp', 
     '#charts':'charts', 
     '#dunstablepara':'dunstablepara', 
     '#webcams':'webcam' 
    } 
    if (window.location.hash in mappings) { 
     switchToDiv(mappings[window.location.hash]); 
    } else { 
     //special case for home 
    } 
} 

Имейте в виде, что с функцией написано как и выше, словарь сопоставлений создается каждый раз. Это, безусловно, будет менее эффективным, чем оператор switch, хотя, возможно, более аккуратный.

Answer 2

Вы ищете location.hash вместо location.href.

W3Schools: http://www.w3schools.com/jsref/prop_loc_hash.asp