Я пытаюсь разработать веб-сайт. На моем сайте есть две ссылки для навигации. Когда пользователь нажимает на ссылку навигации, страница будет загружаться без обновления. Я сделал эту часть. Но проблема в том, что цвет активной ссылки не меняется. Это мой сайт 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');
});
Скажите, пожалуйста, как я могу решить эту проблему?
Изменить цвет напрямую
$(".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;
}
Если я правильно прочитал, вам нужно сбросить якорь:
$("#anchor1").hide();
$("#anchor1").attr('href', some_val);
$("#anchor1").show();
Или
var href = $('#anchor1').attr("href")
$('#anchor1').removeAttr('href').prop('href', href);
Или т.п.
Точка - заставить браузер перекрасить элемент.
#
, но вы вырезали это изnewHash
? Так что вам нужно добавить его обратно в ваш селектор, где вы добавляете класс.