Если у меня есть один файл nav_bar.html, который включен на другие страницы, как мне показать, какой пункт меню активен? - PullRequest
Новая
       36

Если у меня есть один файл nav_bar.html, который включен на другие страницы, как мне показать, какой пункт меню активен?

2 голосов
/ 14 августа 2010

спасибо, что нашли время прочитать это.

У меня есть панель навигации JavaScript (jQuery) на моей главной странице, которая просто "включена" на моей странице.Например, у меня есть index.shtml, который «включает» панель навигации, то есть «nav_bar.shtml».И это то же самое для любой другой страницы.Теперь ясно, что при текущей настройке нет способа показать пользователю, какой пункт меню в данный момент выбран, поскольку страница nav_bar.shtml остается статичной.

Что я хочу сделать, так это, чтобы все еще иметь только один файл nav_bar.shtml, но иметь возможность на отдельных страницах показывать пользователю текущий пункт меню, выбранный на панели навигации (как вразные оттенки цвета и т. д.).Если nav_bar.shtml остается статичным, нет четкого способа сделать это.Есть ли обходной путь, если я не хочу создавать совершенно новую навигационную панель Javascript на каждой странице?Или каждая страница должна иметь свою собственную версию кода nav_bar, специфичную для этой страницы, чтобы она знала, какой элемент ей нужно закрасить?

Ответы [ 3 ]

1 голос
/ 14 августа 2010

Один из способов сделать это - написать код для просмотра в вашем меню, найти href ссылок и сравнить их с текущим window.location.pathname. Если у вас есть хорошие чистые URL-адреса, это не так уж сложно. Если у вас длинные и сложные URL-адреса, это может быть невозможно.

Итак, вот общая идея: 

$(document).ready( function(){
  var thispage = location.pathname.substring(1);
  $('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

Предполагается, что ваше меню выглядит примерно так: 

<ul id="menu">
  <li><a href="page1.html">This</a></li>
  <li><a href="page2.html">That</a></li>
  <li><a href="page3.html">The Other</a></li>
</ul>

И конечно: 

li.active {
    background-color: yellow;
}
0 голосов
/ 14 августа 2010

Я не знаю, если это ответ, который вы ищете. Но вам не нужен javascript для того, чтобы затенять определенный элемент на определенной странице.

Вы всегда можете воспользоваться CSS-селекторами, например: 

<body id="homepage">
   <ul id="tabs">
     <li id="tab-homepage"><a href="...">homepage</a></li>
     <li id="tab-news"><a href="...">news</a></li>
     ...

В вашем CSS вы можете сказать что-то вроде: 

#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }

Итак, наконец, вам нужно всего лишь изменить атрибут "id" элемента body, чтобы получить затененные пункты меню.

В любом случае, если вы используете jQuery, вы всегда можете использовать что-то вроде: 

$('body').attr('id', '...');
0 голосов
/ 14 августа 2010

Вы можете попытаться определить, на какой странице в данный момент находится пользователь, с помощью window.location.pathname и на этом основании затенить соответствующий пункт меню.

Пример: 

function shadeMenuItem(item){
    //Your code to style the given element here
}
$(document).ready(function() {
    if(window.location.pathname.match(/^\/questions.*/)){
        shadeMenuItem($('#questions'));  //shade menu item 'questions'
    }
    else if(window.location.pathname.match(/^\/users.*/)){
        shadeMenuItem($('#users'));  //shade menu item 'users'
    }
});

Еслиэтот код был реализован на этой странице, первое условие будет соответствовать, что означает, что shadeMenuItem() будет иметь элемент с #questions, переданным ему.

...