Как сделать css a: активную работу после щелчка?

Я пытаюсь сделать меню, работающее как вкладки. Сами вкладки работают отлично, а ссылки в меню также замечательные. Но я бы хотел удалить границу вклада активной вкладки, чтобы она выглядела так, будто вы на этой фактической странице. Я пробовал использовать #id a:active, но, похоже, работает только до тех пор, пока я нажимаю ссылку. У меня было хотя и делать это с помощью javascript, но я не могу понять, как это сделать. Здесь мой css для активных.

CSS: (пожалуйста, дайте мне знать, если вам понадобится больше моего css)

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Спасибо, /Pyracell

Ответы

Ответ 1

Из вашей демонстрационной ссылки в комментариях к другому ответу JavaScript не будет никакой помощи, это должно быть сделано в вашем PHP-коде. Что-то в строках:

<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
    TAB_NAME
</a>

Упоминание о том, что изменение вкладок перенаправляется на другую страницу, могло помочь с лучшими ответами с начала xD

В зависимости от вашего кода и того, как вы создаете вкладки, вам нужно изменить this_tab_is_selected на код, который возвращает true для выбранной вкладки.

P.S. Вам все равно нужно внести изменения, упомянутые в другом ответе в вашем CSS. (Который должен изменить #navigation a:active на #navigation a.active)

Ответ 2

Добавить и удалить класс при выборе ссылки вкладки.

#navigation .active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

и используйте script (версия jQuery)

$(function(){

    $('#navigation a').click(function(){

        $('#navigation .active').removeClass('active'); // remove the class from the currently selected
        $(this).addClass('active'); // add the class to the newly clicked link

    });

});

Ответ 3

Грубый способ сделать это с помощью JavaScript (jQuery)

  $('a[href]').each(function() {
    if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
      $(this).addClass('active');
  });

Ответ 4

Как вы реализуете вкладки; как несколько разных HTML-страниц? Псевдокласс класса :active действительно применяется только тогда, когда ссылка активна, что обычно означает "нажатие". Если вы используете вкладки в виде нескольких HTML-страниц, вам, вероятно, захочется присвоить вкладке CSS, например, "CurrentTab", на вкладке, представляющей страницу, на которой находится пользователь, и применить ваш border-bottom-width:0px к этому классу.

Ответ 5

Практика, которая обычно выполняется, - это применить класс к выбранной в данный момент вкладке, например. class= "selected", а затем измените свой css на целевой класс

#navigation a.selected

Ответ 6

Это не так, как это работает. Активный селектор соответствует (как вы заметили) ссылке, которая в данный момент нажимается (= активна/работает). Что вы хотите, это селектор для активной страницы. Вам нужно будет использовать обычный класс css, например:

#navigation a:active, #navigation a.active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Ответ 7

Такие вещи должны выполняться с помощью оператора if с использованием кода, такого как PHP.

Например, если вы нажмете ссылку, вы получите новую страницу, задайте переменную страницы, например:

$page = "Home";

Затем используйте инструкцию if для добавления или удаления дополнительных CSS-классов/идентификаторов для выбора стиля, например.

if ($page == "home")
{
  <a href="home.php" class="active">Home</a>
  <a href="about.php">About</a>
}
else if ($page == "About")
{
  <a href="home.php">Home</a>
  <a href="about.php" class="active">About</a>
}