[英]how to change active link color without page refresh?
我正在嘗試開發一個網站。 我的網站有兩個導航鏈接。 當用戶單擊導航鏈接時,頁面將被加載而不刷新。 我已經完成了這一部分。 但是問題是,活動鏈接的顏色沒有改變。 這是我的網站https://dl.dropboxusercontent.com/u/168659703/project3/index.html ,我使用以下代碼進行頁面加載
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wra"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$(".nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$(".nav a").removeClass("active");
$(".nav a[href="+newHash+"]").addClass("active");
});
});
};
});
$(window).trigger('hashchange');
});
請告訴我如何解決這個問題?
如果我讀得正確,則需要重置錨點:
$("#anchor1").hide();
$("#anchor1").attr('href', some_val);
$("#anchor1").show();
要么
var href = $('#anchor1').attr("href")
$('#anchor1').removeAttr('href').prop('href', href);
之類的。
指向強制瀏覽器重新繪制元素。
直接更改顏色
$(".nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
$(this).css('color', '#000'); // black for example
return false;
});
或添加一個類
$(".nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
$(this).addClass('visited');
return false;
});
的CSS
.visited {
color: #000;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.