Последний свернутый код, надеюсь, он кому-нибудь поможет:
$("#menu").find("a").hover(function(){
$(this).addClass("active");
},function(){
$(this).not(".clicking").not(".selected").removeClass("active");
});
$("#menu").find("a").click(function(){
var $this = $(this);
$("#ajaxP").fadeIn("fast");
$("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
$("#normalcontent").slideDown("slow");
});
$("#primarycontainer").hide("fast").load($this.attr("href") +" #primarycontainer","",function(){
$("#primarycontainer").slideDown("slow");
$("#ajaxP").fadeOut("fast");
})
$this.closest('ul').find('a').removeClass('active clicking selected');
$this.addClass('active clicking selected');
return false;
});
Редактировать: Спасибо за ответы, он работает сейчас.Я добавил дополнительный класс «selected» (который не имеет ничего в css) и написал соответствующий код.Вот новый код.Как я могу минимизировать> этот код?
Вот оно: http://cebrax.freesitespace.net/new/
<div id="menu">
<ul>
<li><a href="index.php" id="homeLink">home</a></li>
<li><a href="#">news</a></li>
<li><a id="test" href="#" class="active selected">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
<li><a href="contact.php" id="contactLink">contact</a></li>
<li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
</ul>
</div>
И jQuery:
$("#menu").find("a").hover(function(){
$(this).addClass("active");
},function(){
$(this).not(".clicking").not(".selected").removeClass("active");
});
$('#homeLink').click(function(){
var $this = $(this);
$("#ajaxP").fadeIn("slow");
$("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
$("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
$("#ajaxP").fadeOut("normal");
$this.closest('ul').find('a').removeClass('active clicking selected');
$this.addClass('active clicking selected');
return false;
});
$('#contactLink').click(function(){
var $this = $(this);
$("#ajaxP").fadeIn("slow");
$("#normalcontent").hide("slow").load("contact.php #normalcontent").slideDown("slow");
$("#primarycontainer").hide("slow").load("contact.php #primarycontainer").slideDown("slow");
$("#ajaxP").fadeOut("normal");
$this.closest('ul').find('a').removeClass('active clicking selected');
$this.addClass('active clicking selected');
return false;
});
Привет!Я создал меню, которое добавляет класс «активный» при наведении курсора к каждому li и удаляет класс> при наведении курсора, кроме тех, которые уже имеют класс «активный».Пока это сделано.Однако у меня есть еще один .click () для каждого li, который загружает контент в> где-нибудь с ajax.Проблема начинается здесь, когда я нажимаю, я хочу добавить класс «активный»> к элементу, по которому щелкнули, и удалить класс из всех.Я добавляю класс, но li, который имел> класс «активный» до щелчка, не становится «активным» при наведении, я думаю, что «активный»> класс не удаляется из него?Кто-нибудь может помочь?
<div id="menu">
<ul>
<li><a href="index.php" id="homeLink">home</a></li>
<li><a href="#">news</a></li>
<li><a id="test" href="#" class="active">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
<li><a href="contact.php" id="contactLink">contact</a></li>
<li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
</ul>
</div>
Вот jquery:
$("#menu").find("a").not(".active").each(function(){
$(this).hover(function(){
alert($(this));
$(this).addClass("active");
},function(){
$(this).not(".clicking").removeClass("active");
});
});
$("#homeLink").click(function(){
var myThis=$(this);
$("#ajaxP").fadeIn("slow");
$("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
$("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
$("#ajaxP").fadeOut("normal");
$("#menu").find("a").each(function(){
$(this).unbind('mouseover').unbind("mouseout");
$(this).removeClass("active clicking");
});
myThis.addClass("active clicking");
return false;
});