Как стилизовать выбранную кнопку / ссылку с CSS или JavaScript?

Question

Я бы хотел стилизовать выбранную мной кнопку. Я хотел бы отобразить голубую рамку вокруг изображения выбранной кнопки, чтобы показать, на какой странице находится пользователь. (или просто используйте то же изображение при наведении курсора, что и изображение выбранной кнопки, когда кнопка нажата.) У меня не было успеха с селекторами ссылок css: посещенный,: фокус или: выбранный. Требуется ли для этого решение javascript? спасибо за любые указатели!

Answer 1

я обычно просто дополнительное имя класса, называемое selected

   <div class="button selected">Button 1</div> 
   <div class="button">Button 2</div>

  .selected {
      border: 1px solid #0000ff;
  }

Это зависит от того, как вы отображаете свою страницу (используя ajax или обновление при каждом клике).Если вы используете javascript для загрузки содержимого страницы, вы просто добавляете дополнительное имя класса, используя javascript при нажатии кнопки.

Answer 2

Решение jQuery с вашим CSS

Возможно, вы сначала захотите проверить, выбран ли он, чтобы это решение работало с такими вещами, как Twitter Bootstrap, где вы можете заставить любой элемент действовать как кнопка:

$(function () {
    $('div.button').click(function(){
        if ($(this).hasClass('selected') {
                $(this).removeClass('selected');
                //Insert logic if you want a type of optional click/off click code
            } 
            else
            {
                $(this).addClass('selected');
                //Insert event handling logic
            }
    })
});

Answer 3

вы должны использовать :active псевдо-класс в css для достижения того, что вы хотите.

Answer 4

На самом деле вам нужно будет использовать JavaScript. Я сделал это в проекте некоторое время назад, перебирая ссылки в панели навигации и устанавливая класс с именем «selected» на тот, который пользователь посещает в настоящее время.

Если вы используете jQuery, вы можете сделать это следующим образом:

$(function() { 
    $('#navbar li').each(function() { 
        if ($(this).children('a').attr('href') == window.location.pathname)
        {
            $(this).addClass('active');
        }
    });
})

Псевдо-селектор CSS: активный не будет активным после перезагрузки страницы.