---
title: "jQuery .addClass för meny?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/185205-jquery-addclass-för-meny"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "ramo_and"
published: "2010-11-11T11:36:26.000Z"
updated: "2010-11-29T12:07:59.000Z"
replies: 16
views: 921
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185205-jquery-addclass-för-meny"
---

# jQuery .addClass för meny?

## #1 — ramo_and, 2010-11-11T11:36Z

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? :)

Permalänk: https://www.webforum.nu/p/185205

## #2 — voigtann1, 2010-11-11T11:38Z

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.

Permalänk: https://www.webforum.nu/p/2259217

## #3 — ramo_and, 2010-11-11T11:46Z

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?

Permalänk: https://www.webforum.nu/p/2259218

## #4 — voigtann1, 2010-11-11T11:50Z

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?

Permalänk: https://www.webforum.nu/p/2259219

## #5 — ramo_and, 2010-11-11T11:54Z

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>

Permalänk: https://www.webforum.nu/p/2259220

## #6 — voigtann1, 2010-11-11T11:59Z

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");
	}
})
```

Permalänk: https://www.webforum.nu/p/2259223

## #7 — ramo_and, 2010-11-11T12:34Z

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"?

Permalänk: https://www.webforum.nu/p/2259227

## #8 — voigtann1, 2010-11-11T13:00Z

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

Permalänk: https://www.webforum.nu/p/2259232

## #9 — ramo_and, 2010-11-11T13:15Z

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?

Permalänk: https://www.webforum.nu/p/2259234

## #10 — voigtann1, 2010-11-11T13:34Z

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");
	}
})
```

Permalänk: https://www.webforum.nu/p/2259235

## #11 — ramo_and, 2010-11-11T13:48Z

Tack nu funkar det! :)

Permalänk: https://www.webforum.nu/p/2259239

## #12 — ramo_and, 2010-11-29T09:47Z

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>
```

Permalänk: https://www.webforum.nu/p/2263641

## #13 — voigtann1, 2010-11-29T09:54Z

hur ser HTML koden ut då?

Permalänk: https://www.webforum.nu/p/2263644

## #14 — ramo_and, 2010-11-29T10:50Z

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>
```

Permalänk: https://www.webforum.nu/p/2263645

## #15 — voigtann1, 2010-11-29T11:30Z

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.

Permalänk: https://www.webforum.nu/p/2263650

## #16 — ramo_and, 2010-11-29T12:00Z

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");
});
});
```

Permalänk: https://www.webforum.nu/p/2263654

## #17 — voigtann1, 2010-11-29T12:07Z

```
$(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>
```

Permalänk: https://www.webforum.nu/p/2263655

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185205-jquery-addclass-för-meny