jQuery .addClass för meny?

Har gjort en egen meny i sidhuvudet där jag vill att en klass skall läggas till när man klickar på länkarna där så att jag då kan ändra bakgrunden på den som är "selected". html-koden ser ut såhär:

<div id="main_nav">
  <ul>
    <li class="home"><a class="selected" href="#">Hem</a></li>
    <li class="sales"><a href="#">Kampanjer</a></li>
    <li class="buying_conditions"><a href="#">Köpvillkor</a></li>
  </ul>
</div>

För detta har jag då följande jQuery:

<script type="text/javascript">

$(document).ready(function(){

$("#main_nav ul li a").click(function (){
   $(this).addClass("selected");
   }, function () {
      $(this).removeClass("selected");
   });
});

</script>

Men nu läggs bara klassen till just när man klickar. Jag vill att klassen ska vara där tills man klickar på nån annan länk. Och när man klickar skall ju såklart klassen "selected" tas bort från den länken i menyn som har det innan.

Dessutom vill jag att när man klickar var som helst på sidan förutom på länken till "Kampanjer" eller "Köpvillkor" så ska "Hem" bli selected. För detta bör man väl köra nån slags if sats i jQuery koden antar jag.

Hur gör jag får att fixa detta? :)

Du få leta upp alla $("#main_nav ul li a") när du klickar på dom och ta bort css klassen.

var menuLinks = $("#main_nav ul li a");

menuLinks.click(function () {
	menuLinks.removeClass("selected");
	$(this).addClass("selected");
});

Dock så måste elementen finnas, de kan inte skapas fler list element efter att DOM-readyn är körd, om du kör en senare version av jquery så kan du använda dig av live eller delegate.

Ja detta blir nästan rätt.. hehe. När jag klickar på länken så får den länken jag klickar på klassen selected och bakgrunden ändras men sen går selected tillbaka "Hem"-länken. Om jag t ex. klickar på kampanjer så vill jag att selected klassen skall stanna där så att man ser att man är på just kampanjer. Klickar på sedan på köpvillkor så ska den bli selected o stanna där. Klickar jag på nån annan länk utanför denna menyn skall hem få klassen selected igen.

Är du med på vad jag menar?

loopar igenom alla a-element och kontrollera om window.location är densamma som this.href, om ja => sätt klass till selected. Är det det du är ute efter?

Hehe nu är jag inte riktigt med på vad du menar.. Jag visar med ett exempel istället. Så här vill jag att det skall bli (utan drop-down funktionen)

http://themeforest.net/item/awake-powerful-professional-wordpress-theme/full_screen_preview/111267

Ja, det förstå jag ju att du är ute efter, men på varje sida så har server kod som lägger in klassen:

$("#main_nav").find("a").each(function() {
	if(this.href===window.location.href) {
		$(this).addClass("selected");
	}
})

Nice! Nu blir det nästan helt rätt. Jag har ju markerat "hem" som default o lagt till klassen selected själv där. Men den ligger ju kvar hela tiden. Hur gör för den skall tas bort när jag klickar på t ex. "kampanjer"?

kör bara en kombination av båda skript jag har gett dig + kör en else på sista koden som removeClass("selected").

Kanon! Bara en liten detalj kvar nu... hehe.. när jag klickar på andra länkar utanför menyn så blir ingen av länkarna i menyn selected. Vill helst att "Hem" ska va selected hela tiden förutom när man är på "kampanjer" eller "köpvillkor".

Går det att fixa på nåt smidigt sätt?

Ja, med serverkod, det är omöjligt att veta vad "någonsida.html" referera till i var den ligger i en av huvudmenyn om "någonsida.html" inte finns där. Eller så säger du att hem alltid är selected och aldrig plockar bort ".selected" förrän den hittar det i menyn.

$("#main_nav").find("a").each(function() {
	if(this.href===window.location.href) {
		$("#main_nav").find("a").removeClass("selected");
		$(this).addClass("selected");
	}
})

Tack nu funkar det! :)

Ledsen att jag tar upp denna tråden igen men denna funktionen har slutat fungera... jag har inte rört denna koden alls så fattar inte varför..

koden ser ut såhär:

<script type="text/javascript">

$(document).ready(function(){
var menuLinks = $("#main_nav ul li a");

menuLinks.click(function () {
	menuLinks.removeClass("selected");
	$(this).addClass("selected");
});

$("#main_nav").find("a").each(function() {
	if(this.href===window.location.href) {
		$("#main_nav").find("a").removeClass("selected");
		$(this).addClass("selected");
	}
});

});

</script>

hur ser HTML koden ut då?

såhär:

<div id="main_nav">
  <ul>
    <li class="home"><a class="selected" href="http://shop.textalk.se/se/shop.php?id=19194">Hem</a></li>
    <li class="sales"><a href="http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3334523">Kampanjvaror</a></li>
    <li class="buying_conditions"><a href="http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3298836">Köpvillkor</a></li>
    <li class="about"><a href="http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3376544">Om Port Nordic</a></li>
  </ul>
</div>

jag gissar att det är din webbshop det handlar om, det är ju inte samma länkar ens:

http://www.portnordic.com/kopvillkor.html => http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3298836

omöjligt att säga vilket a-element som skall vara markerat på det sättet.

Aah okej. Fast detta är ju sidhuvudsmenyn och inte den på köpbvillkor.

Finns de nåt annat sätt jag kan använda då? Karltex är textalk baserat och dom har ju lyckats med det.

https://www.karltex.se

jag gjorde ett försök med att använda liknade kod som på menyn för köpvillkor men funkade inte. Jag skrev då:

$(function(){
var links = $("#main_nav").find("li a");
links.click(function(){
links.removeClass("selected").filter(this).addClass("selected");
});
});

$(function(){
var links = $("#main_nav").find("li a");
links.click(function(){
links.removeClass("selected").filter(this).addClass("selected");
});
});

kommer bara fungera innan sidan laddas om.

men om du kollar deras källkod så har dom gjort en "mappning":

<script language="Javascript">
var twsMenuItemPages = {
  'img2': [ 'http://www.karltex.se/se/page/rea', '/shop/5639/5639-2014583-shopw-7e51b7.png'],
  'img3': [ 'http://www.karltex.se/se/page/hjalp', '/shop/5639/5639-2014583-shopw-c42d25.png'],
  'img4': [ 'http://www.karltex.se/se/page/kopvillkor', '/shop/5639/5639-2014583-shopw-5c84b9.png'],
  'img5': [ 'http://www.karltex.se/se/page/om-karltex.se', '/shop/5639/5639-2014583-shopw-73a3ed.png'],
  'img1': [ 'http://www.karltex.se/se/', '/shop/5639/5639-2014583-shopw-9acf37.png']
};
</script>