Søg
Avatar billede jimpp Nybegynder
05. oktober 2006 - 14:14 Der er 13 kommentarer og
1 løsning

Skift Class i Javascript

Koden:

function VisOgLoad(value)
{
  //i <= antallet af hoved punkter, ikke særligt dynamisk mend et virker :)
  //Nulstiller alle div's så de ikke vises
  for(i = 0; i <= 6; i++)
  {
    document.getElementById("menu_"+i).style.display = "none";
    //Her vil jeg meget gerne have TD_+i sat til denne class "TDmenu1"
  }
    //Her vil jeg meget gerne have TD_+value sat til denne class "TDmenu2" 
  document.getElementById("menu_"+value).style.display = "";
  document.getElementById("menu_0").style.display = "none";
}

Har prøvet en masse forskellige bl.a.
document.getElementById("TD_"+i).className = "TDmenu1"; i min for løkke, men det hjælper ikke... får et "Object var ventet" :( - Hvad gør jeg galt :)
Avatar billede Slettet bruger
05. oktober 2006 - 14:24 #1
Kan du ikke poste lidt html også?

Det ser ud til at document.getElementById ikke kan finde et element med id "TD_"+i.
Avatar billede olebole Juniormester
05. oktober 2006 - 14:35 #2
<ole>

At skifte CSS-klasse er noget af det dårligst performende, man kan foretage sig i en browser. I et komplekst dokument kan det tage op til flere sekunder!
Skift i stedet de enkelte style-properties på elementerne ... det er langt mere effektivt.

- men mere hjælp kræver, vi kan se noget kode  ;o)

/mvh
</bole>
Avatar billede jimpp Nybegynder
05. oktober 2006 - 14:48 #3
Smækker den halvfærdige kode ind her :)

<style>
  BODY {
    margin:0px;
    font-size: 10pt;
    font-family: Arial, 'Arial Unicode MS', 'MS Sans Serif', Verdana, Helvetica;   
    font-weight:bold;
    font-face:verdana;
  }
 
  DIV {
    background-image: url("images/ccbg.gif");
    border-bottom:1px solid black;
    height:20px;
  }
 
  .TDMenu1 {
    background-color:#3366CC;
    color:#FFFFFF;
    font-weight:bold;
    border-bottom:1px solid black;
    border-left:1px solid #3366CC;
    border-right:1px solid #3366CC;
  }
   
  .TDMenu2 {
    background-color:#3C9DFF;
    color:#FFFFFF;
    font-weight:bold;
    border-bottom:1px solid #3366CC;
    border-left:1px solid black;
    border-right:1px solid black;
    cursor:pointer;
  }
 
</style>
</HEAD>
<BODY>
<script type="text/JavaScript">
function VisOgLoad(value)
{
  //i <= antallet af hoved punkter, ikke særligt dynamisk mend et virker :)
  //Nulstiller alle div's så de ikke vises
  for(i = 0; i <= 6; i++)
  {
    document.getElementById("menu_"+i).style.display = "none";
  }
 
  document.getElementById("menu_"+value).style.display = "";
  document.getElementById("menu_0").style.display = "none";
}

function LukOgLoad(value)
{
  document.getElementById("menu_"+value).style.display = "none";
  document.getElementById("menu_0").style.display = "";
}
</script>
<table style="font-size:10pt;" cellpadding="2" cellspacing="0" border="0" width="100%">
  <tr>
    <td id="TD_1" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(1);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(1);" width="10%">Punkt 1</td>
    <td id="TD_2" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(2);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(2);" width="10%">Punkt 2</td>

    <td id="TD_3" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(3);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(3);" width="10%">Punkt 3</td>
    <td id="TD_4" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(4);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(4);" width="10%">Punkt 4</td>
    <td id="TD_5" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(5);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(5);" width="10%">Punkt 5</td>
    <td id="TD_6" class="TDmenu1" onmouseover="this.className='TDMenu2';java script:VisOgLoad(6);" onmouseout="this.className='TDMenu1';java script:LukOgLoad(6);" width="10%">Punkt 6</td>
    <td class="TDmenu1" width="40%">&nbsp;</td>
  </tr>
</table>

    <div id="menu_0"></div>
    <!-- Undermenuerne -->
    <div id="menu_1" onmouseover="java script:VisOgLoad(1);" style="display:none;">
      Dette er div nummer 1
    </div>
    <div id="menu_2" onmouseover="java script:VisOgLoad(2);" style="display:none;">
      Dette er div nummer 2
    </div>
    <div id="menu_3" onmouseover="java script:VisOgLoad(3);" style="display:none;">
      Dette er div nummer 3
    </div>

    <div id="menu_4" onmouseover="java script:VisOgLoad(4);" style="display:none;">
      Dette er div nummer 4
    </div>
    <div id="menu_5" onmouseover="java script:VisOgLoad(5);" style="display:none;">
      Dette er div nummer 5
    </div>
    <div id="menu_6" onmouseover="java script:VisOgLoad(6);" style="display:none;">
      Dette er div nummer 6
    </div>
Avatar billede jimpp Nybegynder
05. oktober 2006 - 14:49 #4
Ideen er at "Punkt 1" skal beholde onover classe indtil man vælger feks "Punkt 3"
Avatar billede Slettet bruger
05. oktober 2006 - 15:11 #5
Så vidt jeg kan se har du navngivet dine divs TD_1, ... TD_6, men din forløkke løber igennem TD_0, ..., TD_6! Så den broker sig jo nok over TD_0 som ikke findes!
Avatar billede olebole Juniormester
05. oktober 2006 - 15:16 #6
- men som sagt, er det en rigtig skidt måde at ændre styling på.
Endvidere må du ikke bruge JavaScript pseudo-protokollen i en event-handler ... aldrig 'java script:' i 'onmouseover' eller 'onmouseout'
Avatar billede jimpp Nybegynder
05. oktober 2006 - 15:16 #7
Argh... jeg prøver lige at rette til :)
Avatar billede olebole Juniormester
05. oktober 2006 - 15:20 #8
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/perf/dhtmlperf.asp

Læs under: "Avoid switching classes and style rules"
Avatar billede jimpp Nybegynder
05. oktober 2006 - 15:33 #9
Og lur mig om ikke det spiller :)
Avatar billede jimpp Nybegynder
05. oktober 2006 - 15:35 #10
olebole -> Kan godt se pointen, men det er et MEGET lille system, som bruges af et par sælgere, og det kører tilsyneladdende helt fint.
Avatar billede olebole Juniormester
05. oktober 2006 - 15:54 #11
Helt fint ... jeg har selv gjort det i en snæver vending. Der kan dog være mange andre, der læser med - eller evt. finder dette spm. ved en senere søgning ... ikke mindst for deres skyld  ;o)
Avatar billede jimpp Nybegynder
05. oktober 2006 - 16:06 #12
I det perspektiv - Kære medlæssere tag min slamkode med et gran salt, den ryger aldrig godt igennem en validator :)

Jeg lukker, når jeg har et svar :)
Avatar billede olebole Juniormester
05. oktober 2006 - 16:08 #13
*ROTFLMAO*  =:D

- og svaret må komme fra jjust
Avatar billede Slettet bruger
05. oktober 2006 - 16:10 #14
Det kommer her ;)
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Å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
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
I dag 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I dag 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
I går 13:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
I går 11:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
White papers
Flere white papers »