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

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

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

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

Edit:

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

  <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>

источник

2016-04-24 Bonzai

являются эти атрибуты хранятся в неупорядоченном списке? не можете ли вы разместить свою активную страницу один справа поверх неупорядоченного списка, я имею в виду самый верхний индекс? –

Почему вы не публикуете код для добавления «активного» класса? Будет легче изменить, чтобы ответить на ваш вопрос. – BeS

Извините, я добавил навигационную страницу, которая включена. – Bonzai

Вот чистый CSS способ сделать это с помощью Flexbox заказа.

ul { 
    … 
    display: flex; 
    flex-direction: column; 
} 

li[class=active] { 
    order: -1; 
    … 
}

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

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

источник

2016-04-24 18:10:33

Действительно классное решение +1 – Edward

@Edward Спасибо, человек. –

Perfect. Спасибо! – Bonzai

Jsfiddle link

JQuery:

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

HTML

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

источник

2016-04-24 17:44:21

Проверьте, что: https://jsfiddle.net/3ves02f8/1/ –

это хорошо ...., вам нужен этот? –

Что значит, мне нужно это? Да, его проще; Я помню, что был поразительным, когда я впервые понял истинное функционирование 'append()/prepend()' –

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

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

источник

2016-04-24 17:54:18

Зачем сравнивать его с местоположением, почему бы просто не использовать hasClass ('active')? Этот код не будет работать без изменения объекта местоположения. – Edward

Я пробовал, он работает ... Но вы можете использовать 'hasClass ('active')' также .. Я не думаю, что есть разница. –

Используете ли вы объект глобального местоположения, когда имеете в виду местоположение? – Edward

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

ответ

Смежные вопросы