Søg
Avatar billede BTEngineer Novice
19. juli 2011 - 20:46 Der er 16 kommentarer og
1 løsning

Ændring af Class med JavaScript

Hej,

Jeg har lavet en lille menu:

<ul>
    <li onclick="CngClass(this);"><a href="?p=home">Hjem</a></li>
    <li onclick="CngClass(this);"><a href="?p=blog">Blog</a></li>
    <li onclick="CngClass(this);"><a href="#">hey</a></li>
    <li onclick="CngClass(this);"><a href="?p=about">hey</a></li>
    <li onclick="CngClass(this);"><a href="?p=references">heej</a></li>
    <li onclick="CngClass(this);"><a href="#">Links</a></li>
    <li onclick="CngClass(this);"><a href="#">Kontakt</a></li>
</ul>

JavaScript-koden ser således ud:

var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='current_page_item';
Lst=obj;
}

Det virker super - Når man trykker rundt skifter den pågældende menu-knap farve, og bliver der, indtil at man trykker på noget andet. Mit problem er nu bare, at når der så kommer et link på, i stedet for #, så opdaterer den jo siden, og så forsvinder den markerede menu-knap. Så, er der nogen der ved hvordan man laver således at den husker hvilken menu-knap der nu skal have markeringen/farven?

Mange tak på forhånd.
Avatar billede claes57 Ekspert
19. juli 2011 - 20:49 #1
du skal nok via cookies for at holde det simpelt.
Avatar billede BTEngineer Novice
19. juli 2011 - 20:52 #2
Hmm, jeg har virkelig ikke megen erfaring med cookies. Nogle forslag til hvordan? :-)
Avatar billede olebole Juniormester
19. juli 2011 - 21:58 #3
<ole>

Du kan bruge a:active til at farve linket, sålænge brugeren klikker på det. Derudover sætter du med serverscript en klasse på linket til den side, du står på. Det er måden, den slags oftest løses på  =)

/mvh
</bole>
Avatar billede olebole Juniormester
19. juli 2011 - 21:59 #4
PS: og så har du ikke brug for onclick handleren
Avatar billede BTEngineer Novice
19. juli 2011 - 22:19 #5
Det lyder meget nemt. Men der er jo tale om billeder:


#menu {
    width: 940px;
    height: 80px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    height: 35px;
    margin-right: 1px;
    padding: 16px 40px 0px 40px;
    background: url(images/img04.gif) no-repeat right top;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    border: none;
}

#menu a:hover, #menu .current_page_item a {
    background: url(images/img05.gif) repeat-x left top;
    text-decoration: none;
    color: #FFFFFF;
}

#menu .current_page_item a {
}

Det lyder noget nemmere at gøre det på den måde du beskriver! - Det lyder ikke af meget kode; vil du evt. vise hvordan du havde tænkt det, det ville være en stor hjælp :-)
Avatar billede olebole Juniormester
19. juli 2011 - 22:42 #6
#menu a:active,
#menu a.activeLink {
    background: /* passende kode, som jeg ikke kan kende */;
}

- og så afhængig af dit serversprog og sitestruktur skriver du en speciel klasse ind i menuen på det sted, der svarer til siden, brugeren står på:


<ul>
    <li><a href="?p=home">Hjem</a></li>
    <li><a href="?p=blog">Blog</a></li>
    <li><a href="#">hey</a></li>
    <li><a class="activeLink" href="?p=about">hey</a></li>
    <li><a href="?p=references">heej</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Avatar billede BTEngineer Novice
19. juli 2011 - 22:58 #7
Hmm, ja den idé er jeg med på. Det ville også virke. Men min sitestruktur vil ikke passe til denne løsning, da jeg kun har selve sideopbygningen og designet, herunder også menuen, på én side, og bruger php til at hente de sider der skal hentes med ?p=home f.eks.
Avatar billede olebole Juniormester
20. juli 2011 - 03:09 #8
Så lad PHP skrive en klasse på det element, der passer til værdien af $_GET["p"]. PHP understøtter da vist både if/else og switch  *o)
Avatar billede BTEngineer Novice
20. juli 2011 - 09:52 #9
Du tænker
<?php if($_GET['p']=="home") { echo "class='activeLink'"; } ?>


Jeg har lige prøvet overstående kode, men så melder den:

Serverfejl
Webstedet fandt en fejl under hentning af http://henrikdirect.dk/new/. Det kan være under vedligeholdelse eller konfigureret forkert.
Her er nogle forslag:
Reload this web page later.
HTTP-fejl 500 (Internal Server Error): Der opstod en uventet hændelse, mens serveren forsøgte at gennemføre anmodningen.

Jeg kan virkelig ikke se nogle fejl i den lille stumpe php-kode.
Avatar billede olebole Juniormester
20. juli 2011 - 16:43 #10
Den linje skaber med garanti ikke ballade. Fejlen skyldes noget andet, men hvad det præcist er, kan jeg af gode grunde ikke vide  =)
Avatar billede claes57 Ekspert
20. juli 2011 - 17:37 #11
adhængig af, hvordan den sættes ind præcist - prøv denne
<?php if($_GET['p']=="home") { echo " class='activeLink' "; } ?>
bare så der ikke står
  <li><aclass="activeLin...
Avatar billede BTEngineer Novice
21. juli 2011 - 13:31 #12
Perfekt. Det virker således:

<li <?php if($_GET['p']=="home") { echo " class='current_page_item' "; } ?>><a href="?p=home">Hjem</a></li>

Nu er det præcist som jeg ønskede! - Mange tak for hjælpen!

Hvis det er okay med jer, vil jeg gerne dele pointene imellem jer begge således:
85 til olebole og 45 claes57 :-) - smid et svar hver.
Avatar billede olebole Juniormester
21. juli 2011 - 13:54 #13
Selvtak. Jeg samler ikke længere points, men tak for tilbudet  =)
Avatar billede BTEngineer Novice
21. juli 2011 - 14:00 #14
Okay :-)

Jamen, så bedes Claes57 smide et svar.
Avatar billede claes57 Ekspert
21. juli 2011 - 14:03 #15
ok, så... Og nu husker du mellemrum fremover. ;)
Avatar billede BTEngineer Novice
21. juli 2011 - 14:10 #16
I will, har aldrig haft problemer uden mellemrum før. ;-) Mange tak.
Avatar billede olebole Juniormester
21. juli 2011 - 14:39 #17
Det er også en forholdsvis ny adfærd, at Apache/PHP går død ved (visse) markup fejl
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
6 min siden AI google.com Af Peter Olsen i Andre onlineløsninger
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
White papers
Flere white papers »