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');
});

希望，这有帮助！

活动链接css没有显示阴影

2 个答案: