Выделите выделенный элемент в navbar

<div class="wrap"> 
    <div class="nav-wrap"> 
    <ul class="group" id="example-one"> 
     <li class="current_page_item"><a href="#">Home</a></li> 
     <li><a href="#">Movies</a></li> 
     <li><a href="#">EVENTS</a></li> 
     <li><a href="#">Booking</a></li> 
     <li><a href="#">Sign In</a></li> 
     <li><a href="#">Theatres</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul>         
    </div> 
</div>

приведенный выше мой navabar. что я должен сделать, чтобы выделить выделенный элемент в навигационной панели? я должен использовать любой jquery или что-то подобноеВыделите выделенный элемент в navbar

источник

2015-07-18 Bloodhound

Пожалуйста, попробуйте это

$('#example-one a').click(function(e) { 
    $('#example-one a').removeClass('current_page_item'); 
    $(this).addClass('current_page_item'); 
});

DEMO

источник

2015-07-18 07:55:23

Я пробовал свой код, но addclass ('current_page_item') не работает со мной – Bloodhound

Вы проверили консоль? Возможно, на странице будет некоторая ошибка. Этот код отлично работает в «DEMO» –

да, я это увидел. – Bloodhound

Здесь jquery нет необходимости .. вы можете просто добавить этот css:

a:hover{ 
    background-color:#aaa; 
    color:white; 
} 
a:active{ 
    background-color:#000; 
    color:white; 
}

с любым цветом, который вы хотите.

Выполнить этоjsfiddle

Только помните - hover должны прийти до active для этого, чтобы быть эффективным. A reference here.

источник

2015-07-18 08:07:11

благодарю вас за ответ – Bloodhound

@AjithN уверен, это сработало? –

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

). – Bloodhound

В зависимости от ситуации вы хотите, чтобы выделить в, существуют различные способы, чтобы сделать это, это один я считаю, поможет вам:

<div class="wrap"> 
    <div class="nav-wrap"> 
    <ul class="group" id="example-one"> 
     <li class="active"><a href="#">Home</a></li>//current page 
     <li><a href="#">Movies</a></li> 
     <li><a href="#">EVENTS</a></li> 
     <li><a href="#">Booking</a></li> 
     <li><a href="#">Sign In</a></li> 
     <li><a href="#">Theatres</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul>         
    </div> 
</div>

CSS:

.group a { 
    background-color: #000; 
} 
.group a:hover { 
    background-color: #fff; 
} 
.active a { 
    background-color: #fff; 
}

Затем просто измените атрибут класса на элемент списка для активной страницы.

источник

2015-07-18 08:07:51

, порядок появления стилей важен - 'hover' должен быть до' active', чтобы это было эффективным. [ссылка] (http://www.w3schools.com/css/css_pseudo_classes. asp) –

@learning Исправлено, спасибо! –

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

Я думаю, что вам нужно,

HTML

<div class="wrap"> 
    <div class="nav-wrap"> 
     <ul class="group" id="example-one"> 
      <li class="current_page_item"><a href="#">Home</a></li> 
      <li><a href="#">Movies</a></li> 
      <li><a href="#" class="active">EVENTS</a></li> 
      <li><a href="#">Booking</a></li> 
      <li><a href="#">Sign In</a></li> 
      <li><a href="#">Theatres</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul>         
    </div> 
</div>

CSS

.group .active { background-color: #000; }

В зависимости от ваших требований, добавить active класс li или a на активированном пункта (текущая страница).

источник

2015-07-18 08:44:24

Выделите выделенный элемент в navbar

ответ

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