活動鏈接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不顯示影子

回答

相關問題