Блог

Я работаю над веб-сайтом на основе twitter-bootstrap и решил сохранить верхний и нижний колонтитулы в виде отдельных php-файлов, включенных в каждую подстраницу веб-сайта. Все работало отлично, пока я не захотел добавить «активный» класс к моему текущему выбору (т.е. страница, на которой пользователь находится в данный момент).

Я нашел этот скрипт, который должен работать нормально:

 $("a").click(function() {        
    $(".active").removeClass("active");
    $(this).parent("div").addClass("active");
});
  

но я понял, что это работает только на долю секунды, а затем мы вернулись к меню по умолчанию -ничего не выбрано. Я проверил страницу html, и класс не был добавлен. Я понял, что это потому, что после перенаправления на новый URL, новый header.php загружается — поэтому выделение не применяется.

Любой совет о том, как я могу обойти это?

Для такого сценария есть одно решение. Всякий раз, когда вы визуализируете страницу, укажите имя флага для этой страницы и используйте это условие флага в своем заголовочном файле,

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

 <ul>
  <li <?php if ($_SERVER['PHP_SELF'] == '[this_link]') { ?>class="active"<?php } ?>>
    <a href="[this_link]">Home</a>
  </li>
</ul>
  

Синтаксис может быть неправильным, так как я не специалист по PHP, и этот логин должен работать на любом языке, установленном вашим дружелюбным соседским PHP-парнем ^{_{— пожалуйста, замените экземпляры [this_link] вашего фактического текста href}}

Проверьте, что возвращается с глобального сервера, просто выполнив такой тест:

 <?php echo $_SERVER['PHP_SELF']; ?>
  

Даже если вы работаете на localhost, пока на вашем локальном сервере работает php версии 4 или выше, это должно что-то вернуть.

Я предполагаю, что причина, по которой он кажется «не работающим», как указано в вашем комментарии, заключается в том, что он возвращает все после доменной части URL страницы, выполняющей скрипт (т. Е. Не Ваш include, а фактическую страницу, которая будет возвращена пользователю). Так, например, http://example.com/foo/bar.php бы вернуться /foo/bar.php . В результате вполне возможно, что это НЕ равно href в вашем теге привязки. Например, если вы ссылаетесь на страницу /foo/bar.php от foo/foo.php , вы могли бы использовать относительный путь, например href=»bar.php «. Итак, если вы проверите, равен ли $_SERVER[‘PHP_SELF’] ссылке href , они не будут равны, даже если это одна и та же страница. Имеет смысл?

Как бы я это сделал на PHP:

Вы не показываете структуру своего сайта или вашего html, поэтому в этом примере просто предполагается, что есть 2 страницы (index.php и contact.php ), которые оба находятся в корневой папке сервера. Также предполагается, что html для меню имеет форму div, содержащего привязочный тег для каждого пункта меню.

 <?php
$currentpage = $_SERVER['PHP_SELF'];
$home = "index.php";
$contact = "contact.php";
?>

<div class="col-sm-2<?php echo ($currentpage == '/'.$home) ? ' active' : ''; ?>">
    <a href="<?php echo $home; ?>">Home</a>
</div>
<div class="col-sm-2<?php echo ($currentpage == '/'.$contact) ? ' active' : ''; ?>">
    <a href="<?php echo $contact; ?>">Contact</a>
</div> 
  

Итак, что это делает?

Сначала есть несколько переменных: одна для $currentpage с использованием $_SERVER[‘PHP_SELF’] и по одной для ссылки на страницу в моем меню.

Затем внутри разметки для класса, в который будет добавлен или нет активный класс, я бы использовал тернарный оператор — если вы с ними не знакомы, это похоже на сокращение для оператора if . Синтаксис для этого выглядит так: (что нужно проверить на истинность)? что делать, если это правда : что делать, если это не так ;.

В этом случае я сравниваю значение $currentpage со значением переменной $home, перед которой стоит косая черта (чтобы она соответствовала тому, как $_SERVER[‘PHP_SELF’] возвращает путь к странице). Если это правда, я повторяю пробел плюс слово active. Если это не так, и это важно, я вообще ничего не повторяю, используя только пустую строку. Это одна особенность троичных операторов по сравнению с операторами if, вы должны указать, что делать в случае ‘else’.

Это почти все, что есть. Единственное, что я использую переменную url страницы в атрибуте href.

Хорошо, так что это то, что я бы сделал, но я просто хочу упомянуть, что есть много других способов сделать это. Например, вы могли бы сделать то же самое в javascript или jQuery. В этом случае вы просто включите скрипт на каждую страницу, использующую window.Расположение.имя пути и оператор switch, чтобы определить, по какой ссылке должен быть добавлен активный класс.