[jQuery] W jaki sposób "ukryć" aktywny button? Opcje

[swiezak]

Mam problem z napisaniem skryptu, który byłby odpowiedzialny za "ukrywanie" aktywnego buttona po najechaniu kursorem myszki na inny button.
Na stronie http://webgroup.pl/polyvision/web/ można zaobserwować w górnym menu efekt, który pozwala poszczególnym buttonom przypisać atrybut :hover po najechaniu na nie kursorem myszki oraz atrybut active po kliknięciu. Chciałbym, aby np. po wybraniu działu 'O nas' najechanie kursorem myszki na sąsiedni button (przykładowo 'Kontakt') spowodował, że 'O nas' nie będzie podświetlony. W jaki sposób za pomocą skryptu to wykonać?

Fragmenty kodu:

HTML:

[HTML] pobierz, plaintext 
				<div id="TopMenuJS">
 
					<dl id="menu1" class="link4">
 
						<dt><a href="index.html" title="Strona główna"><span class="menu_space">Strona główna</span></a></dt>
 
						<dt><a href="o-nas.html" title="O nas"><span class="menu_space">O nas</span></a></dt>
 
						<dt><a href="aktualnosci.html" title="Aktualności"><span class="menu_space">Aktualności</span></a></dt>
 
						<dt><a href="pobierz-pdf.html" title="Pobierz PDF"><span class="menu_space">Pobierz PDF</span></a></dt>
 
						<dt><a href="standardy.html" title="Standardy"><span class="menu_space">Standardy</span></a></dt>
 
						<dt><a href="kontakt.html" title="Kontakt"><span class="menu_space">Kontakt</span></a></dt>
 
					</dl>
 
				</div>
 
				<script type="text/javascript">
				// <![CDATA[
					new Menu('menu1', '', false, false, 100, 0);
				// ]]>
				</script>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
.menu_space {
	display: block;
	padding: 2px 0 0 0;
}
 
#TopMenuJS {
	float: left;
	margin-top: -43px;
	padding-left: 50px;
	width: 941px;
	height: 43px;
	overflow: hidden;
	position: relative;
	/*border: 1px solid red;*/
}
 
#menu1 dt {
	float: left;
	width: 141px;
	height: 43px;
	line-height: 43px;
	display: block;
	cursor: pointer;
}
 
#menu1 dt.active, #menu1 dt.active a {
	color: #45ddf5;
	background: #000 url('../images/top/menu_top_btn_on.jpg') no-repeat center top;
}
 
#menu1 dt a:hover {
	background: #000 url('../images/top/menu_top_btn_on.jpg') no-repeat center top;
}
 
.link4, .link4 a:link, .link4 a:visited {
	display: block;
	font-size: 15px;
	color: #9d9d9d;
	font-weight: normal;
	text-decoration: none;
}
 
.link4 a {
	text-decoration: none;
}
 
.link4 a:hover {
	color: #45ddf5;
	text-decoration: none;
}
[HTML] pobierz, plaintext 

Próbuję za pomocą poniższego skryptu usunąć atrybut 'active', ale nie działa:

[HTML] pobierz, plaintext 
				<script type=\"text/javascript\">
				// <![CDATA[
					$(document).ready(function(){
						$(\"#menu1 dt. a\").removeClass(\"active\");
					});
				// ]]>
				</script>
[HTML] pobierz, plaintext 

Prosiłbym o jakąś wskazówkę, w jaki sposób rozwiązać wyżej wymieniony problem.

[kamil4u]

To nie <a>, a <dt> ma ustawioną klasę 'active';

Kod

$('#menu1 dt.active').removeClass("active");

[swiezak]

'Fucktycznie', pomyliłem selektory.
Tylko teraz pytanie, jak zrobić aby atrybut active dla dt był usuwany po nakierowaniu kursorem myszki na pozostałe buttony? Nie jestem dobry w jQuery, więc proszę o wyrozumiałość.

Ten post edytował swiezak 19.09.2011, 22:08:24

[kamil4u]

http://api.jquery.com/hover/
W pierwszej funkcji usuwasz i zapamiętujesz co usunąłeś, w drugiej z powrotem ustawiasz klasę 'active' odpowiedniemu(zapisanemu) elementowi.

Ten post edytował kamil4u 19.09.2011, 22:09:35