Søg
Avatar billede mekaniker Nybegynder
25. marts 2004 - 23:49 Der er 9 kommentarer og
1 løsning

Skifte farve på tekst og celle baggrund

Jeg er ved at lave nogle faneblade, hvor teksten er mørk og celle bagrunden er lys, når man så trykker på linket i cellen skifter den så til lys tekst farve og mørk baggrundsfarve, men jeg kan ikke få teksten på den som skal skifte tilbage igen til at ændre sig tilbage.
Det er lidt svært at forklare, men se her:

<script language="JavaScript">
function change(nr)
      {
    if (nr != "")
        {
        var dark = '#666666';
        var light = '#CCCCCC';
        var linkid = 'a' + nr;
        for (x=1;x<4;x++)
            {
            if(document.getElementById(x).style.background == dark)
                {
                document.getElementById(x).style.background = light;
                document.getElementById(x).style.color = dark;
                }
            }
            document.getElementById(nr).style.background = dark;
            document.getElementById(linkid).style.color = light;
        }
    }
</script>



<table width="900" height="370"  border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
        <tr>
          <td width="62" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="1">
            <div align="center"><a href="billeder_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(1);" style="font-size:10px;font-weight:bold;" id="a1">Billeder</a></div></td>
          <td width="78" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="2">
            <div align="center"><a href="dybdekort_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(2);" style="font-size:10px;font-weight:bold;" id="a2">Dybdekort</a></div></td>
          <td width="46" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="3">
            <div align="center"><a href="data_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(3);" style="font-size:10px;font-weight:bold;" id="a3">Data</a></div></td></tr></table>
Avatar billede skovenborg Nybegynder
26. marts 2004 - 00:55 #1
kunne du ikke bare skrive:
var activeTd;
function change(nr)
      {

    var dark = '#666666';
    var light = '#CCCCCC';
    var linkelm = document.getElementById('a' + nr);
    if (activeTd != linkelm) {
        if (activeTd) {
                activeTd.parentNode.parentNode.style.backgroundColor = light;
                activeTd.style.color = dark;
        }
        linkelm.parentNode.parentNode.style.backgroundColor = dark;
        linkelm.style.color = light;
        activeTd = linkelm;
    }
}
Avatar billede mm12010 Nybegynder
26. marts 2004 - 00:58 #2
sådan:

function change(nr){
    if(arguments.length>0){
        var dark='#666666';
        var light='#CCCCCC';
        var linkid='a'+nr;
        for(x=1;x<4;x++){
            if(document.getElementById(x).style.background==dark){
                document.getElementById(x).style.background=light;
                if(x!=nr) document.getElementById('a'+x).style.color=dark;
                }
            }
        document.getElementById(nr).style.background=dark;
        document.getElementById(linkid).style.color=light;
        }
    }


desuden bør dine id'er ikke kun være et tal - i stedet for 1, 2 og 3 burde du kalde dem td1, td2 og td3
Avatar billede thesurfer Nybegynder
26. marts 2004 - 01:06 #3
Skulle meget gerne virke:

<script language="JavaScript">
var dark = '#666666';
var light = '#CCCCCC';
var linkid = '';
function change(nr)
{
if (nr != "")    {
    linkid = 'a' + nr;
    for (i=1; i<3;i++){
    document.getElementById(i).style.background = light;
    document.getElementById('a' + i).style.color = dark;
    }
    document.getElementById(nr).style.background = dark;
    document.getElementById('a' + nr).style.color = light;
}
}
</script>
Avatar billede thesurfer Nybegynder
26. marts 2004 - 01:06 #4
rettelse:

<script language="JavaScript">
var dark = '#666666';
var light = '#CCCCCC';
var linkid = '';
function change(nr)
{
if (nr != "")    {
    linkid = 'a' + nr;
    for (i=1; i<3;i++){
    document.getElementById(i).style.background = light;
    document.getElementById('a' + i).style.color = dark;
    }
    document.getElementById(nr).style.background = dark;
    document.getElementById(linkid).style.color = light;
}
}
</script>
Avatar billede olebole Juniormester
26. marts 2004 - 02:07 #5
<ole>

Der ligger et link i cellerne - og det er det link, der skal skifte farve. Desuden er det ikke nødvendigt, at bladre alle igennem i en løkke. Vi kan nøjes med at lægge det aktive element i en global variabel og sætte styles på den:

<script type="text/JavaScript">
var actTab = false;
var dark = "#666666";
var light = "#CCCCCC";
function change(inx) {
    var elm = document.getElementById("t"+inx);
    var a = document.getElementById("a"+inx);
    if (actTab) {
        var actTabInx = actTab.id.split("t")[1];
        actTab.style.backgroundColor = light;
        document.getElementById("a"+actTabInx).style.color = dark;
    }
    elm.style.backgroundColor = dark;
    a.style.color = light;
    actTab = elm
}
</script>

<table width="900" height="370"  border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
<tr>
    <td width="62" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="t1">
        <div align="center">
            <a href="billeder_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(1);" style="font-size:10px;font-weight:bold;" id="a1">Billeder</a>
        </div></td>
    <td width="78" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="t2">
        <div align="center">
            <a href="dybdekort_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(2);" style="font-size:10px;font-weight:bold;" id="a2">Dybdekort</a>
        </div></td>
    <td width="46" height="20" style="background-color:#CCCCCC; font-size:10px;font-weight:bold;" id="t3">
        <div align="center">
            <a href="data_iframe.php?id=<?php echo $id; ?>" target="iframe" onClick="return change(3);" style="font-size:10px;font-weight:bold;" id="a3">Data</a>
        </div></td>
</tr>
</table>

Du kan i øvrigt ikke begynde et id med et tal. Derfor har jeg ændret dinne celle id'er til 't+id' ... f.eks: id="t1".

/mvh
</bole>
Avatar billede olebole Juniormester
26. marts 2004 - 02:10 #6
... og det her script er nok en anelse mere 'sexy':

<script type="text/JavaScript">
var actTab = false;
var dark = "#666666";
var light = "#CCCCCC";
function change(inx) {
    var elm = document.getElementById("t"+inx);
    var a = document.getElementById("a"+inx);
    if (actTab) {
        actTab.elm.style.backgroundColor = light;
        actTab.a.style.color = dark;
    }
    elm.style.backgroundColor = dark;
    a.style.color = light;
    actTab = {"elm":elm, "a":a}
}
</script>
Avatar billede mekaniker Nybegynder
26. marts 2004 - 08:19 #7
Tak for al den hjælp, jeg har nu brugt olebole's forslag, for det med at jeg kunne slippe for løkken tiltalte mig lidt.

>>olebole
Jeg har en a:hover style på linket i cellen, og den virker første gang, dvs. at når man har klikket på linket og klikket på et andet link bagefter, så den har løbet dit script igennem, og skiftet tilbage til start udseenet, så forsvinder denne a:hover effekt. Det er ikke fordi det betyder så meget, men det ville da være fedt hvis dette også virkede.

læg også et svar så du kan få nogle point
Avatar billede olebole Juniormester
26. marts 2004 - 21:38 #8
Hehe ... det anede mig, dette spm. ville blive det næste  :)
Lad os lige se på logikken - og hvad der egentlig er ønskeligt (eller rettere, hvad _jeg_ synes - så må vi se, om du er enig ... hehe).

Hover-effekten skal signallere til brugeren: "Her er en funktionalitet, du kan udløse med et klik".
Derfor bør hover-effekten kun være aktiv, når det pågældende faneblad er 'passivt'. Er det aktivt, vil der jo ikke ske noget nyt ved et klik.
Til gengæld skal vi altså retablere hover-effekten, når vi atter gør et faneblad 'passivt' ...... enig?

Hvis du i forvejen har lagt farver og 'fine ting' på i CSS, vil jeg mene, dette vil kunne gøre det:
        actTab.elm.style.backgroundColor = "";
        actTab.a.style.color = "";
du kan sikkert selv se, hvad det er for linier jeg retter i scriptet  :)

Jeg har ikke testet det, men vil afgjort mene, at browserne vil opfatte dette som: "Vend tilbage til default-tilstanden" - og dermed retablere hover-effekten.

Er du ikke enig - eller min rettelse ikke gør, hvad jeg 'påstår' - må du vende tilbage, så finder vi en JS-løsning i stedet for CSS-hover'en  ;o)
/mvh
Avatar billede mekaniker Nybegynder
29. marts 2004 - 11:26 #9
>> Ole

Super tak for hjælpen, jeg brugte kun denne linie:
actTab.a.style.color = "";

For ellers forsvandt baggrundsfarven helt..

Læg venligst et svar så du kan få nogle point.
Avatar billede olebole Juniormester
29. marts 2004 - 15:55 #10
Det var så lidt - og så takker jeg for points  :)
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 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »