php - removeClass og addClass - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery php

Bruger #15663 @ 28.09.11 11:55

Hejsa.

Jeg er ved at arbejde med min menu, så når man klikker på den og kommer til en ny side, så er den der er blevet klikket fået tildelt en class på dens li der hedder current, så man hele tiden kan se hvor man er.

Hvordan skal jeg gøre det bedst?
Jeg kan jo kode det på lidt forskellige måder, men kan ikke finde ud af hvilken jeg skal vælge?
Og hvordan jeg skal lave det.

Jquery virker vel kun på den side man står på, så hvis man springer til en ny side så virker det vel ikke?
PHP kunne man sikkert også lave det med, ved bare ikke hvordan.

I kan se min side her

Håber på der er en venlig sjæl der kan hjælpe mig videre

6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 28.09.11 21:53

4.283

Burde løse det - bemærk hvor jeg har fremhævet, samt fjernet din click listener...

Kode

$(document).ready(function(){
     //Menu
         //Gem alle submenuer
         $("#sidebar ul li ul").hide();
         //Vis current submenu
         $("#sidebar ul li ul li.current").parent().show();
         
         //Gør link klikbar
         $("#sidebar ul li a").click(
             function(){
             	 /****/
             	 $("#sidebar ul li").removeClass("current");
             	 $(this).parent().addClass("current");
             	 /****/
                 $(this).parent().siblings().find("ul").slideUp("normal");
                 $(this).next().slideToggle("normal");
                 return false;    
             }
         );
         
         $("#sidebar ul li.nosubmenu").click(
             function(){
                 window.location.href=(this.href);
                 return false;
             }
         );
 })

Men(!) dette er kun en løsning der kan bruges hvis du ikke reloader siden. Gør du det - er du nødt til at definere den aktive side i en server-side process.

Bruger #16025 @ 28.09.11 12:27

442

JScript kode

 $(".link").click(function() {
   $(".link").removeClass("current");
   $(this).addClass("current");
 });

Bruger #15663 @ 28.09.11 14:09

415

Det virker ikke...

Kan ikke lige se hvad jeg gør galt.

I får lige HTML og JS kode

HTML kode

 <div id="sidebar">
          <ul>
                   <li class="nosubmenu current">
                           <a href="index.php">
                                  <img src="images/icons/menu/home.png" alt="" />
                                 Skrivebord
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Tr?ning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/movie.png" alt="" />
                                  Film
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/calendar.png" alt="" />
                                  Kalender
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/contacts.png" alt="" />
                                  Kontakter
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/factory.png" alt="" />
                                  Arbejde
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/inbox2.png" alt="" />
                                  Privat
                          </a>
                          <ul>
                                   <li><a href="">Bank</a></li>
                                  <li><a href="">Bonner</a></li>
                                  <li><a href="">Forsikring</a></li>
                                  <li><a href="">Regninger</a></li>
                                  <li><a href="">Skat</a></li>
                          </ul>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/settings.png" alt="" />
                                 Indstillinger
                          </a>
                  </li>
          </ul>
 </div>

JScript kode

 $(document).ready(function(){
     //Menu
         //Gem alle submenuer
         $("#sidebar ul li ul").hide();
         //Vis current submenu
         $("#sidebar ul li ul li.current").parent().show();
         
         //Gør link klikbar
         $("#sidebar ul li a").click(
             function(){
                 $(this).parent().siblings().find("ul").slideUp("normal");
                 $(this).next().slideToggle("normal");
                 return false;    
             }
         );
         
         $("#sidebar ul li.nosubmenu").click(
             function(){
                 window.location.href=(this.href);
                 return false;
             }
         );
         
         //Set current class
         $("#sidebar ul li").click(function() {
             $("#sidebar ul li").removeClass("current");
             $(this).addClass("current");
         });
     
 })

Det handler om at jeg skal have fjernet den current der er også sætte den til en ny når der klikkes på en.
Men på et tidspunkt kommer mine links jo til at linke til noget og derfor skal det jo ikke ændre sig når der klikkes.

Så Daniele, tror du har misforstået det.

Bruger #16502 @ 28.09.11 15:32

122

Det virker ikke...

Kan ikke lige se hvad jeg gør galt.

I får lige HTML og JS kode

HTML kode

 <div id="sidebar">
          <ul>
                   <li class="nosubmenu current">
                           <a href="index.php">
                                  <img src="images/icons/menu/home.png" alt="" />
                                 Skrivebord
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Tr?ning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/movie.png" alt="" />
                                  Film
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/calendar.png" alt="" />
                                  Kalender
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/contacts.png" alt="" />
                                  Kontakter
                          </a>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/factory.png" alt="" />
                                  Arbejde
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/inbox2.png" alt="" />
                                  Privat
                          </a>
                          <ul>
                                   <li><a href="">Bank</a></li>
                                  <li><a href="">Bonner</a></li>
                                  <li><a href="">Forsikring</a></li>
                                  <li><a href="">Regninger</a></li>
                                  <li><a href="">Skat</a></li>
                          </ul>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/settings.png" alt="" />
                                 Indstillinger
                          </a>
                  </li>
          </ul>
 </div>

JScript kode

 $(document).ready(function(){
     //Menu
         //Gem alle submenuer
         $("#sidebar ul li ul").hide();
         //Vis current submenu
         $("#sidebar ul li ul li.current").parent().show();
         
         //Gør link klikbar
         $("#sidebar ul li a").click(
             function(){
                 $(this).parent().siblings().find("ul").slideUp("normal");
                 $(this).next().slideToggle("normal");
                 return false;    
             }
         );
         
         $("#sidebar ul li.nosubmenu").click(
             function(){
                 window.location.href=(this.href);
                 return false;
             }
         );
         
         //Set current class
         $("#sidebar ul li").click(function() {
             $("#sidebar ul li").removeClass("current");
             $(this).addClass("current");
         });
     
 })

Hvorfor har du både:

JScript kode

 $("#sidebar ul li").removeClass("current");
 $(this).addClass("current");

Man skal passe på med this set en variabel i stedet for.
Det kunne måske også være nemmere at bruge toggle funktionen.

Med venlig hilsen,
Asker

Bruger #15663 @ 28.09.11 15:34

415

Den må du lige uddybe Asker

Bruger #16025 @ 28.09.11 23:08

442

Burde løse det - bemærk hvor jeg har fremhævet, samt fjernet din click listener...

Kode

$(document).ready(function(){
     //Menu
         //Gem alle submenuer
         $("#sidebar ul li ul").hide();
         //Vis current submenu
         $("#sidebar ul li ul li.current").parent().show();
         
         //Gør link klikbar
         $("#sidebar ul li a").click(
             function(){
             	 /****/
             	 $("#sidebar ul li").removeClass("current");
             	 $(this).parent().addClass("current");
             	 /****/
                 $(this).parent().siblings().find("ul").slideUp("normal");
                 $(this).next().slideToggle("normal");
                 return false;    
             }
         );
         
         $("#sidebar ul li.nosubmenu").click(
             function(){
                 window.location.href=(this.href);
                 return false;
             }
         );
 })

Men(!) dette er kun en løsning der kan bruges hvis du ikke reloader siden. Gør du det - er du nødt til at definere den aktive side i en server-side process.

Det ville jeg råde til getUrlParam() med jQuery

removeClass og addClass

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler