---
title: "class active med undermenyer.."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/184572-class-active-med-undermenyer"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Renegade8164"
published: "2010-09-09T02:25:07.000Z"
updated: "2010-09-09T17:52:45.000Z"
replies: 16
views: 1299
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/184572-class-active-med-undermenyer"
---

# class active med undermenyer..

## #1 — Renegade8164, 2010-09-09T02:25Z

Hej, jag håller på med ett blogg-system och har fastnat i class="active" på mina menyer samt undermenyer. Javascript/CSS/HTML funkar som det ska, men jag måste kunna skriva ut class="active" beroende på vilken sida jag är inne på och inte manuellt.

Jag använder mig utav en drop-down meny, så jag behöver class="active" på \<li\>-taggen också, vilket har skapat mig stora problem som jag inte vet hur ja ska gå till väga. (Jag har funderat på PHP-lösningar, men vill hålla min html-kod (template) så ren som möjligt.)

Här är den koden jag använder mig utav;

**admin_head.tpl**

```
...
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
    $(document).ready(function () {
        InitMenuEffects ();
    });
    function InitMenuEffects () {
        /* Sliding submenus */
        $('.sidebar .menu ul ul').hide();
        $('.sidebar .menu ul li.active ul').show();
        
        $('.sidebar .menu ul li').click(function () {
            submenu = $(this).find('ul');
            if (submenu.is(':visible'))
                submenu.slideUp(150);					
            else
                submenu.slideDown(200);									
            return false;
        });
    }
    </script>
</head>
....
```

**admin_sidebar.tpl** (med class="active" inskrivet manuellt)

```
...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li>
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">{lang_administration}</a>
                <ul>
                    <li class="active"><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...
```

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

## #2 — voigtann1, 2010-09-09T04:57Z

hur ser den genererade HTML koden ut? för det är inget fel på din html kod.

det du saknar kan jag tänka mig att du vill plocka bort active på: 

```
$('.sidebar .menu ul li').click(function () {
```

Antingen sparar du undan $('.sidebar .menu ul li'), som en variabel innan click-eventet och removeClass("active") på kollektionen och sedan ta $(this).addClass("active").

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

## #3 — Renegade8164, 2010-09-09T08:41Z

Den HTML-koden är exakt som den jag skrev men utan class="active" på de två \<li\>-taggarna.

Jag försökte på så som du sa, men gick inget vidare för mig. Antingen markerades hela menyer eller så markerades bara när jag klickade på \<li\>.

Kan vart så att jag skrev koden helt fel, då jag e inte så smart på js.

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

## #4 — voigtann1, 2010-09-09T08:50Z

vänta nu.. är det när du trycker på exempelvis stats så skall den + noderna upp få klassen active?

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

## #5 — Renegade8164, 2010-09-09T09:25Z

För att beskriva det mer grafiskt tog jag printscreens på menyn. hm..

1\. När sidan Overview (admin.php) är laddad ska det se ut så här när class="active" på båda \<li\>;

![](http://img189.imageshack.us/img189/6630/skrmavbild20100909kl111.png)

2\. Jag kan tycka på meny-namnet (Administration) och då åker den upp och ser nu ut såhär;

![](http://img814.imageshack.us/img814/6630/skrmavbild20100909kl111.png)

3\. Sen när jag vill se en annan eller flera menyer kan jag göra det (\<li\> utan class="active").

![](http://img831.imageshack.us/img831/6630/skrmavbild20100909kl111.png)

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

## #6 — voigtann1, 2010-09-09T09:37Z

vad jag kan se ( <http://jsbin.com/alira3/> ) så gör den ju redan det du vill att den skall göra. eller du vill att {username} också skall bli vit markerad(vit markerad bara om den är expanderad?

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

## #7 — Renegade8164, 2010-09-09T12:58Z

Ja JS animerar rätt o så. Men jag har ju fortfarande problem med att få class="active" på rätta länkar

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

## #8 — voigtann1, 2010-09-09T12:59Z

på bild 2, när den är "inne" skall den plocka bort "active" klassen? förlåt, men jag måste vara trög, för jag kopplar inte bilderna mot vad din kod inte gör.

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

## #9 — Renegade8164, 2010-09-09T14:23Z

På bild 2 fälls menyn ihop, men är fortfarande active

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

## #10 — voigtann1, 2010-09-09T14:26Z

> **[Renegade8164 skrev:](https://www.webforum.nu/p/1516014)**
>
> På bild 2 fälls menyn ihop, men är fortfarande active

Det skall den inte vara då? 

kolla på clicket och kör: 

```
if($(this).hasClass("active")) { $(this).removeClass("active") }
```

 eller: <http://jsbin.com/alira3/3/>

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

## #11 — Renegade8164, 2010-09-09T14:46Z

Det löste inte mitt problem, det var lite fel. Jag vill att Javascript fattar att när jag går till ex; "minblogg.se/admin/profile.php". Så ska den list-item (\<li\>\<a href="profile.php"\>\</a\>\</li\>) som innehåller länk till "profile.php" sättas class="active" på \<li\>-taggen, samt sätta class="active"  på \<li\>-taggen på övermenyn.

Om jag går till profile.php ska koden bli såhär:

```
...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li class="active">
                <a href="#">{username}</a>
                <ul>
                    <li class="active"><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li>
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...
```

om jag går till account.php ska koden bli såhär:

```
...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li class="active">
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li class="active"><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li>
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...
```

Om jag går till stats.php ska koden bli såhär:

```
...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li>
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li class="active"><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...
```

...

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

## #12 — voigtann1, 2010-09-09T15:45Z

kolla bara vad din location.href är just nu och se om du kan matchar den med $("a\[href='"+location.href+"'\]")

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

## #13 — Renegade8164, 2010-09-09T16:05Z

okej... hur gör jag det?

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

## #14 — voigtann1, 2010-09-09T16:08Z

```
function findLink() {
	$(".menu a").each(function() {
		if (this.href===location.href) {
			$(this).parents("li").addClass("active");
		}
	});
}
```

Och kör funktionen innan du kör din InitMenuEffects()

exempel: <http://voigt.se/sandbox/wf/menu/index.html>

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

## #15 — Renegade8164, 2010-09-09T17:14Z

Tack :D

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

## #16 — Renegade8164, 2010-09-09T17:48Z

Men nu fick jag ett nytt problem...
När jag trycker på länkarna refereras jag inte. Ex; om jag klickar på "Manage Profile", som länkar till profile.php så händer det inget. Hm.

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

## #17 — voigtann1, 2010-09-09T17:52Z

det är ju din kod som gör det, du kör return false på alla dina a-element:

```
function InitMenuEffects () {
        /* Sliding submenus */
        $('.sidebar .menu ul ul').hide();
        $('.sidebar .menu ul li.active ul').show();
        
        $('.sidebar .menu ul li>a').click(function () {
            submenu = $(this).find('ul');
            if (submenu.is(':visible'))
                submenu.slideUp(150);					
            else
                submenu.slideDown(200);									
            return false;
        });
    }
```

eller bara plocka bort return false; eftersom dina andra länkar är "#"

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/184572-class-active-med-undermenyer