PHP Lang
  1. PHP Lang
  3. Неупорядоченный список – позиция позиции списка
Intereting Posts
PHP – содержимое массива lookup с синтаксисом точки PHP – Foreach и дата сравнения Как проверить, имеют ли два индексированных массива одинаковые значения, даже если порядок не совпадает с PHP? Архитектура плагина php Как преобразовать список параметров функции PHP в ассоциативный массив? избегать возврата после выхода из системы Magento: невозможно переопределить правило продаж базовый http auth через ajax и php Как создать событие Календаря Google без напоминания / Как получить учетные записи службы для олицетворения пользователей PHP bind_params с нулевым Сравнение временных меток с переменной даты (MySQL и PHP) Преобразование текста UTF8 для использования в URL-адресе Данные XML не могут быть отображены из mysql, используя php Google API – запрос на токен из Oauth2 возвращает нулевой токен Не удалось утверждать, что статус HTTP равен 200 не 500

Неупорядоченный список – позиция позиции списка

На данный момент у меня есть веб-сайт с 5 страницами, и основная навигация отображается с использованием неупорядоченного списка. То, что я пытаюсь достичь, – это «активная» страница, которая будет отображаться сначала в списке.

Например, если у меня есть эти страницы: «Главная страница | О нас | Контакты | Блог». Когда вы находитесь на странице контактов, это должно переместиться в начало списка, поэтому меню будет выглядеть так: «Контакты | Главная | О блоге».

Что вызывает у меня проблемы, так это то, что меню включено через php, поэтому для всех страниц есть только одно меню, а через PHP я сделал это так, чтобы он добавлял «активный» класс в пункт меню текущей страницы.

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

Редактировать:

Это страница навигации, которая включена в каждую страницу: 

<nav class="large-nav"> <ul> <li <?php echo ($activePage == 'ourStory') ? "class='active'" : ""; ?> ><a href="our_story.php" title="">OUR STORY</a></li> <li <?php echo ($activePage == 'services') ? "class='active'" : ""; ?> ><a href="services.php" title="">SERVICES</a></li> <li <?php echo ($activePage == 'projects') ? "class='active'" : ""; ?> ><a href="projects.php" title="">PROJECTS</a></li> <li <?php echo ($activePage == 'contact') ? "class='active'" : ""; ?> ><a href="contact.php" title="">CONTACT</a></li> <li <?php echo ($activePage == 'upload') ? "class='active'" : ""; ?> ><a style="margin-right: 0;" href="upload.php#top" title="">UPLOAD</a></li> </ul> </nav>

Вот простой способ CSS, чтобы сделать это, используя упорядочение по Flexbox.

введите описание изображения здесь 

 ul { … display: flex; flex-direction: column; } li[class=active] { order: -1; … }

Демо: http://codepen.io/antibland/pen/ZWjdqL

Поддержка: IE10 +, Firefox, Chrome

Ссылка Jsfiddle

JQuery: 

 $(function(){ $("li").on("click", function(){ $('ul').prepend($(this)) }) })

HTML 

 <ul> <li>Home</li> <li>Contact</li> <li>About</li> <li>Blog</li> </ul>

Вы могли бы сделать что-то вроде этого: 

 $('.large-nav li').each(function() { if($(this).find('a').attr('href') == location) { $('.large-nav ul').prepend($(this)) } })