如何從網址中的哈希中突出顯示特定的div？

當用戶通過www.example.com/#div4來到一個網站時，我希望網址中指定的部分用#F37736（橙色）突出顯示，然後在2秒內順利地轉換回#00A087（默認顏色）。如何從網址中的哈希中突出顯示特定的div？

div將突出顯示爲「固定導航欄」的class。

我已經試過：

var hash = false; 
checkHash(); 

function checkHash(){ 
    if(window.location.hash != hash) { 
    hash = window.location.hash; 
    } t=setTimeout("checkHash()",400); 
};

來源

2015-04-22 Kevin mtk

您正在尋找這樣的事情：http://api.jqueryui.com/highlight-effect/ –

這不是完全清楚，什麼是你想要做什麼呢？ – adeneo

您可以查找散列，然後通過它的類名稱來定位除法。您將立即將div的顏色更改爲橙色，然後將其動畫恢復爲默認顏色。

儘管如此，您將需要包含jQuery Color library來爲background-color設置動畫，因爲vanilla jQuery無法爲background-color生成動畫效果。你也可以使用jQuery UI's highlight effect，認爲UI庫的體積稍大一些。

$(document).ready(function() { 
    var hash = window.location.hash; 
    $('.' + hash).css('background-color', '#F37736').animate({ 
     backgroundColor: '#00A087' 
    }, 2000); 
});

來源

2015-04-24 20:51:01

我假設，你想突出顯示某些事件的背景顏色。嘗試添加此CSS到您的代碼。這將突出顯示懸停時的背景顏色。

.fixed-nav-bar { 
    background-color: #f37736; 
} 

.fixed-nav-bar:hover { 
    background-color: #00a087; 
    -webkit-transition: background-color 2000ms linear; 
    -moz-transition: background-color 2000ms linear; 
    -o-transition: background-color 2000ms linear; 
    -ms-transition: background-color 2000ms linear; 
    transition: background-color 2000ms linear; 
}

希望這會幫助你。

來源

2015-04-22 17:13:00

想要一個臨時事件，而不是事件：懸停抱歉.. –

如何從網址中的哈希中突出顯示特定的div？

回答

相關問題