Как заставить css a: active работать после клика?

Question

Я пытаюсь сделать меню, работающее в качестве вкладок.Сами вкладки работают нормально, а ссылки в меню также хороши ... Но я бы хотел убрать нижнюю границу активной вкладки, чтобы она выглядела так, как будто вы находитесь на этой реальной странице.Я пытался использовать #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

Answer 1

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

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

и использовании сценария ( 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

    });

});

Answer 2

По вашей демонстрационной ссылке в комментариях к другому ответу 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)

Answer 3

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

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

Answer 4

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

Answer 5

Это не так, как это работает. Селектор: active соответствует (как вы заметили) ссылке, по которой в данный момент щелкают (= активно / работает). То, что вы хотите, это селектор для активной страницы . Вам нужно будет использовать обычный класс 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;
}

Answer 6

практика, которой обычно следуют, заключается в том, чтобы применить класс к выбранной в данный момент вкладке, например, class = "selected", а затем изменить ваш CSS для целевого класса

#navigation a.selected

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

Answer 8

Я немного опоздал на вечеринку, но у меня есть простой ответ, используя только css. Присвойте каждой странице уникальный идентификатор, присвойте каждому пункту меню уникальный идентификатор (или класс в данном случае), стилизуйте свои ссылки так, как вам нравится, когда вы не на странице, затем стилизуйте их так, как вы хотите, если вы находитесь на странице , CSS совпадает, когда вы нажимаете на элемент меню и загружает страницу. Таким образом, на какой бы странице вы ни находились, пункт меню отображается как «активный». Ниже у меня там, где текст кнопки текущей страницы меняет цвет, но вы можете использовать свойство visible для показа и скрытия изображений или использовать любой CSS для стилизации. (Также в этом примере css также меняет положение при наведении курсора.) Кроме того, этот метод позволяет вам написать отдельный css для каждой кнопки меню, поэтому каждая кнопка меню может делать что-то отличное от других, если вы хотите.

#menu {
  padding-top: .5em;
  text-align: center;
  font-family: 'Merriweather Sans';
  font-size: 1.25em;
  letter-spacing: 0;
  font-weight: 300;
  color: #003300;
 }
#menu a {
  text-decoration: none;
  color: #003300;
}
#menu a:visited {
  color: #003300;
}
#menu a:hover {
  font-style: italic;
}

#home a.home, 
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
  font-weight: 800;
  color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
  font-style: normal;
}