活动链接css不显示影子

关于此页面：http://www.riversidelab.com/dental-lab-services/all-ceramic/bruxzir-solid-zirconia-crowns-bridges.aspx 活动链接css不显示影子

请点击蓝色按钮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'); 
    }); 

});

来源

2014-02-05 user2343800

这与当前正在发生的事情相反。 –

现在当前的活动链接没有任何阴影，而其他链接是底部阴影。尝试更改条件，并应该非常有帮助 –

$(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）你看不到变化。

我想这会有所不同。

来源

2014-02-05 17:22:31

谢谢，但它没有奏效。你的代码现在正式上线。阴影仍然没有出现。 http://www.riversidelab.com/dental-lab-services/all-ceramic/bruxzir-solid-zirconia-crowns-bridges.aspx – user2343800

更新的内容。检查它解决 –

你正在做的一个非常小的错误。在为变量赋值之前，您试图访问/使用它，这在技术上是错误的。您最好先将值分配给变量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'); 
});

希望，这有助于！

来源

2014-02-05 17:34:23

活动链接css不显示影子

回答

相关问题