CSS текущий / активный li

ProgramBox

CSS текущий / активный li

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#javascript #css

Вопрос:

Просто создаю страницу ajax, которая использует ul li menu.

ДЕМО:http://sitehelp.com.au/demos/ajax

Код ( css)

 #top #menu{
    float: left;
    list-style-type: none;
    margin: 0px 0 0 0px;
} 

#top #menu li{
    position:relative;
    left:300px;
    top:-22px;
    margin-right: 16px;
    text-transform: uppercase;
    color: #3399ff;
    font-size:18px;
    font-weight:bold;
    display:inline;
}

#top #menu li:hover{
    color: #ec008c;
    cursor: pointer;
    text-decoration:underline;
}

html-это:

 <ul id="menu">
    <li id="home">Info</li>
    <li id="press">Press</li>
    <li id="trade">Trade</li>
</ul>

Ссылки запускают ajax-запрос через jquery для динамической загрузки внутренних и внешних страниц… проблема не в этом.

Я не могу поставить li текущий или li активный.

Меню должно оставаться как есть, поэтому я думаю, что наверняка должен быть метод css для отображения меню следующим образом: ( когда мы находимся на этой странице ajax. )

ИНФОРМАЦИЯ ДЛЯ ПРЕССЫ ТОРГОВЛЯ

Допустим, мы нажимаем на ссылку PRESS, мы можем контролировать ее действие на странице. Другими словами, это подчеркивание или жирный шрифт .. или что угодно. Какой класс=»выбранный» или «активный» … Я в тупике

1. Почему вы не можете добавить класс к <li> по мере необходимости?

2. Да, просто добавьте active класс к активному li элементу и оформите его, добавив li.active правило. Почему ты в замешательстве?

3. да, пробовал это, не хочет соответствовать… У меня есть: #top #menu li.active{ оформление текста: подчеркивание;}

4. Тогда просто назовите это как-нибудь по-другому. Для чего вообще нужен другой active класс?

5. Можете ли вы добавить active класс, чтобы мы могли видеть, насколько он не соответствует? И где это #top #menu li.active {text-decoration:underline;} ? Этого нет в вашем main.css .

Ответ №1:

В вашем menu.js файл, попробуйте добавить это в свой код:

 //Manage click events
sections.click(function(){
    //show the loading bar
    showLoading();

    // ADD THIS?
    sections.removeClass('current');
    $(this).addClass('current');

    //load selected section
    switch(this.id){
        case "home": // etc etc...

Теперь просто добавьте немного прекрасного CSS для этого…

 #menu li.current {
    font-weight:bold; /* or whatever... */
}

Удачи!

1. извините, я изначально ввел sections как $sections — я просто отредактировал / исправил это.

2. Удалось это сделать, изменив #menu li.current на #top #menu li.current

3. Хорошо, это работает идеально, однако текущая страница (li ) не выделена, я полагаю, потому что мы не добавили class =»active» или class = «current» (последнее имеет место в вашем примере. Работает A1 спасибо … попробую текущий класс, на li

4. class=»current» да, это исправило это … ууууу

Ответ №2:

Похоже, ваша проблема заключается в том, как вы добавляете :active

Вы написали

«У меня есть: #top #menu li.active{text-decoration:underline;} «

Вам нужно

#top #menu li:active{font-weight:bold;}

Обратите внимание на : вместо .

Также обратите внимание, что вам нужно создать стиль font-weight вместо text-decoration того, что вы уже делаете text-decoration на :hover .

1. Да, я перепробовал все мыслимые версии перед публикацией в Stack, поэтому я был раздражен, что кто-то отклонил мой вопрос. Удивительные. В любом случае, обновил css, но все еще не запускается : (

2. @422. Я поддержал тебя! Вы пытались сделать стиль более конкретным? Итак ul#menu li:active{} , используя тег element в правиле?

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

4. Почему : ? Стили будут применяться только при нажатии на него.

5. @melhosseiny Да. Но в примере кода в предыдущем наборе комментариев @422 написал .active вместо :active , когда он конкретно сказал, что ему нужен селектор для нажатия на элемент… по крайней мере, я так это прочитал.

Ответ №3:

Вы можете использовать немного jquery, чтобы добавить активный класс к выбранному пункту меню.

Ознакомьтесь с решением здесь: http://jsfiddle.net/K6F8m /

Ответ №4:

В вашей функции click добавьте строку, которая добавляет active класс к элементу, на который был сделан щелчок, и удалите active класс из других элементов.

Ответ №5:

Для этого вам нужны как JS, так и CSS.

 sections.click(function(){
    ...
    sections.removeClass("active");
    $(this).addClass("active");
    ...
});

CSS — файл

 #top #menu li.active { text-decoration:underline; }

Ответ №6:

Просто добавьте класс к ссылке, когда пользователь нажимает на нее, и удалите его из всех других ссылок.

 $('#menu a').live('click', function(){
   $('#menu a').removeClass('active');
   $(this).addClass('active');
});

Затем создайте стиль класса css.