mreske
Goto Top

Div Tag Hintergrund soll sich beim Anklicken ändern - Javascript

Hallo
ich habe einen Hyperlink, der über einem Div-Tag liegt.
Beim Aklicken auf den Link soll sich:
1. die Hintergrundfarbe ändern (bei erneutem Anlicken soll die Hintergrundfarbe wieder verschwinden)
2. das dazugehörende Textfeld öffnen (das funktioniert bereits).

73e8e9de6517f77d464ce3d8f56a2b0f


Könnt Ihr mir bitte bei der Ergänzung dieses Quellcodes helfen, damit der Link farbig hinerlegt wird:


<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<script language="javascript">
function toggleFAQ(faq) {
var f = document.getElementById(faq);
if (f.style.display == '')
f.style.display = "none";
if (f.style.display == "none")
f.style.display = "block";
else
f.style.display = "none";
return false;
}
</script>

</head>
<body
<!-- end masthead -->
<table width="100%" border="0" align="left" cellspacing="5">
<tr>
<td align="center" valign="top">
<div align="justify"><br />
<br />
</div>
<div class="">
<div align="left"><a href="#" class="" style="width=550px; padding-left:0px; margin-top:1px;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; text-align: left;
; width=550px; padding-left:0px; margin-top:1px; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-style: normal; text-align: left; color: #000000;
"onclick="return toggleFAQ('faqA1', 'faqA1');
"#invalid_attr_id="none">Wenn ich auf diesen Link klicke, soll der Hintergrund blau werden, wenn ich noch einmal drauf klicke, soll der Hintergrund wieder transparent sein </a></div>
</div>
<div id="faqA1" class="cv_table_content">
<div align="left">
<table width="572" border="0" cellspacing="0">
<tr>
<td align="left" valign="top"><div align="justify">
<ul>
<li><p>TEXT1</p></li>
<li><p>TEXT2</p> </li>
</ul>
</div></td>
</tr>
</table>
</div>
</div>
<div></div>
<script language="JavaScript" type="text/javascript">
faqA1.style.display = "none";
</script></td>
</tr>
</table>
<!--end pagecell1-->
<br />
</body>
</html>


Vielen Dank
Mreske

Content-Key: 159680

Url: https://administrator.de/contentid/159680

Ausgedruckt am: 28.03.2024 um 09:03 Uhr

Mitglied: Arano
Arano 28.01.2011 um 21:07:19 Uhr
Goto Top
Hallo Mreske.

Was ich schon mal sehr gut finde ist das du die Box erst per JS ausblenden lässt und dies nicht schon vorher per CSS deklariert hast, so sehen auch Nutzer mit deaktiviertem JS die Box noch face-smile

Was ich momentan nicht verstehe ist dein Aufruf der Funktion: "foggleFAQ('faqA1','faqA1')"
Laut Definition hat die Funktion nur EINEN Parameter, du übergibst ihr aber ZWEI !?


Und nun zu dem Problem, das du __leider nie genannt hast__ ! Es ist zwar schön das das eine oder andere so funktioniert wir du das möchtest aber wenn wir Helfen sollen, musst du uns schon sagen was noch nicht funktioniert: "Bekomme den Farbwechsel des Links nicht eingebaut"
Ich würde der Funktion einen zweiten Parameter mitgeben und zwar den Link selber mit "this". Das kann dann so aussehen:
<a href="" onclick="toggleFAQ('faqA1',this)">Link</a>  

funktion toggleFAQ(FAQ,LINK)
{
    var box = document.getElementById(FAQ);
    if(box.style.display == "none")  
    {
        box.style.display = "block";  
        LINK.style.backgroundColor = "#ff0000";  
    }
    else
    {
        box.style.display = "none";  
        LINK.style.backgroundColor = "#00ff00";  
    }
}
Ist natürlich __nicht getestet__ aber den Vorgang sollte man doch verstehen können oder !? *g*


Eine schönes Wochenende
~Arano
Mitglied: mreske
mreske 29.01.2011 um 17:50:45 Uhr
Goto Top
Hi Arano,
erstmal besten Dank für die schnelle Antwort. Leider funktioniert das Script nicht, ich habe jetzt alle möglichen Varianten ausprobiert.

Ich muss auch dazu sagen, dass ich absoluter Anfänger bin und mich erst seit ein paar Tagen mit Javascript beschäftige - hab daher etwas Nachsicht, wenn einige Kommentare oder Fehler im Quelltext für dich (Euch) nicht ganz nachvollziehbar sind.

Also das Problem ist, dass ich es nicht hinkriege, dass sich beim klicken auf den Link der Hintergrund einfärbt und bei erneuten klicken wieder transparent wird.


Gruss
MReske
Mitglied: Arano
Arano 29.01.2011 um 18:04:30 Uhr
Goto Top
Hi,

was heisst den für dich
Das Script funktioniert nicht
Funktioniert es gar nichts oder nur ein Teil davon nicht ?
Das die Funktion nun anders aufgerufen werden muss hast du gesehen ?

~Arano
Mitglied: mreske
mreske 31.01.2011 um 12:31:53 Uhr
Goto Top
Hallo Arano,
besten Dank für deine Tipps.
Ich wollte ja nicht nur die Schrift des Links farbig hinterlegen, sondern den Div.

Ich habe das Script jetzt wie folgt geschrieben und jetzt funktioniert es (siehe Quelltext unten).

Jetzt würde ich aber gerne anstatt eine Farbe lieber einen CSS Style laden. Wie würde das gehen?


<html>
<head><title>Farbe ändern</title>
<script language="javascript">
function testscript(faq,DIV) {
var f = document.getElementById(faq);
if (f.style.display == '') {
f.style.display = "none";}
if (f.style.display == "none") {
f.style.display = "block";
DIV.style.backgroundColor = "#00FF00"; }
else {
f.style.display = "none";
DIV.style.backgroundColor = ""; }
return false; }
</script>
</head>
<body>
<div id="div1"><a href=""onclick="return testscript('text1', div1)">Textfeld1 (text1) &ouml;ffnen + Div1 (div1) grau hinterlegen</a></div>
<div id="text1"><p>Text1<br>Text1<br>Text1<br><br></p></div>
<div id="div2"><a href=""onclick="return testscript('text2', div2)">Textfeld1 (text2) &ouml;ffnen + Div2 (div2) grau hinterlegen</a></div>
<div id="text2"><p>Text1<br>Text1<br>Text1<br><br></p></div>
<script language="JavaScript" type="text/javascript">
text1.style.display = "none";
text2.style.display = "none";
</script>
</body>
</html>


Vielen Dank erstmal
Mreske
Mitglied: Arano
Arano 31.01.2011 um 21:26:58 Uhr
Goto Top
Hi,

öhm... naja !
Ich wollte ja nicht nur die Schrift des Links farbig hinterlegen, sondern den Div.
Das hast du so nicht gesagt:
damit der Link farbig hinerlegt wird:

  1. Dein jetziger Funktionsaufruf gefällt mir nicht, kann es zwar nicht mit Sicherheit sagen, aber der zweite Parameter müsste auch in Anführungszeichen stehen !
  2. Warum hast du den Link in einem Div "verpackt" ?
  3. Ein bisschen Eigeninitiative kann ICH doch wohl von DIR erwarten oder ? (s. className)


~Arano
Mitglied: mreske
mreske 01.02.2011 um 09:23:56 Uhr
Goto Top
Hallo Arano,
mein Script funktioniert (jedenfalls bei mir) - und der 2. Parameter muss NICHT in Anführungszeichen stehen, sonst funktioniert das Script nicht.

Ausserdem habe ich mein Anliegen + Lösung (auch wenn sie dir als Profi nicht gefällt) hier gepostet. Dazu screenshots zur Frage. Soviel zur Eigeninitiative.

Den Link habe ich in einen Div gepackt damit der gesamte Hintergrund (nicht nur der Text) farbig hinterlegt wird (so wie in den Screenshots bereits angezeigt).

Vielleicht kann ja irgendwann jemand (auch Anfänger) mit diesem Beitrag etwas anfangen - das ist doch Sinn und Zweck solcher Foren oder?

Wenn ich das CSS script habe, werde ich es hier ebenfalls posten.

Vielleicht probierst Du meine Lösung erst einmal aus bevor du diesen Beitrag unnötig in die Länge ziehst.

Vielen Dank
Mreske