активная ссылка CSS не показывает тень

Question

На этой странице: http://www.riversidelab.com/dental-lab-services/all-ceramic/bruxzir-solid-zirconia-crowns-bridges.aspx

Пожалуйста, нажмите на синюю кнопку VIDEO, он скользит поверх видео. Отлично. Кнопка переходит в активный режим: черный цвет текста. Но он не показывает нижнюю тень css. Как заставить активную кнопку показывать нижнюю тень?

.btnBlue { 
    background-color: #34aadc; 
    border-color: #34aadc; 

    color: white; 
    font-style: oblique; 
    line-height: normal; 
    font-family: Frutiger47LightCnBold, sans-serif; 
    font-size: 25px; 
    width: 100%; 
    white-space: normal; 
    box-shadow: 0px 10px 10px -10px #000000; 
} 
.btnBlue:hover, 
.btnBlue:focus, 
.btnBlue:active, 
.btnBlue.active { 
    background-color: #249ed2; 
    border-color: #218ebd; 

    color: #333333; 
} 
.btnBlue.disabled:hover, 
.btnBlue.disabled:focus, 
.btnBlue.disabled:active, 
.btnBlue.disabled.active, 
.btnBlue[disabled]:hover, 
.btnBlue[disabled]:focus, 
.btnBlue[disabled]:active, 
.btnBlue[disabled].active, 
fieldset[disabled] .btnBlue:hover, 
fieldset[disabled] .btnBlue:focus, 
fieldset[disabled] .btnBlue:active, 
fieldset[disabled] .btnBlue.active { 
    background-color: #34aadc; 
    border-color: #34aadc; 

    color: #333333; 
} 




$(function() { 

    var activeNavButton = null; 

    $('.nav_button').on('click', function(evt) { 

     if (activeNavButton) { 
      activeNavButton.removeClass('active'); 
     } 

     activeNavButton = $(this); 

     activeNavButton.addClass('active'); 
    }); 

}); 

Answer 1

$(function() { 

    var activeNavButton = null; 

    $('.nav_button').on('click', function(evt) { 

     if (activeNavButton) { // activeNavButton will always be null 
      activeNavButton.removeClass('active'); 
     } 

     activeNavButton = $(this); 

     activeNavButton.addClass('active'); 
    }); 

}); 

Вместо этого вы можете так:

$(function() { 

    var activeNavButton = null; 

    $('.nav_button').on('click', function(evt) { 
     activeNavButton = $(this); 
     $('.nav_button').each (function() { 
      $(this).removeClass('active'); 
     } 
     activeNavButton.addClass('active'); 
    }); 

}); 

Я думаю, проблема с CSS

.btn:active, .btn.active { 
    background-image: none; 
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); 
    outline: 0 none; 
} 

Значение непрозрачности, что вы дали очень относительно низким (.125), что вы не могли видеть изменения.

Я думаю, это имеет значение.

Answer 2

Очень маленькая ошибка, которую вы делаете. Прежде чем присваивать значение переменной, вы пытаетесь получить доступ к ней или использовать ее, что является технически неправильным. Лучше сначала назначьте значение своей переменной activeNavButton и попытайтесь ее использовать.

вот что я имею в виду:

$('.nav_button').on('click', function (evt) { 
    activeNavButton = $(this); 
    if (activeNavButton) { 
     activeNavButton.removeClass('active'); 
    } 
    activeNavButton.addClass('active'); 
}); 

Но вот я не понимаю, почему вы проверяете, если ваш переменный существуют или нет. Итак, зачем удалять тот же класс, а затем снова добавить его. В jQuery, когда вы делаете .addClass(), который проверяет, существует ли этот класс или нет в этом элементе. Если существует нет ничего, а если нет, добавляет этот класс. Таким образом, вам не нужно беспокоиться об этом для повторяющегося класса в том же элементе, который нужно добавить.

Поэтому код должен быть:

$('.nav_button').on('click', function (evt) { 
    activeNavButton = $(this); 
    activeNavButton.addClass('active'); 
}); 

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

$('.nav_button').on('click', function (evt) { 
    $(this).addClass('active'); 
}); 

, но здесь, в вашем случае, что я понимаю, что вы хотите, чтобы удалить активный класс из других кнопок и хотите добавить этот класс в кликнули кнопку. Таким образом, этот код должен быть:

$('.nav_button').on('click', function (evt) { 
    $('.nav_button').removeClass("active"); // will remove active class from all the .nav_button 
    $(this).addClass('active'); 
}); 

Надеюсь, это поможет!