Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Div Tag Hintergrund soll sich beim Anklicken ändern - Javascript

Frage Entwicklung JavaScript

Mitglied: mreske

mreske (Level 1) - Jetzt verbinden

28.01.2011 um 16:31 Uhr, 6586 Aufrufe, 6 Kommentare

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 - Klicke auf das Bild, um es zu vergrößern


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 Transitiona lEN"
"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
Mitglied: Arano
28.01.2011 um 21:07 Uhr
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

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:
01.
<a href="" onclick="toggleFAQ('faqA1',this)">Link</a> 
02.
 
03.
funktion toggleFAQ(FAQ,LINK) 
04.
05.
    var box = document.getElementById(FAQ); 
06.
    if(box.style.display == "none") 
07.
08.
        box.style.display = "block"; 
09.
        LINK.style.backgroundColor = "#ff0000"; 
10.
11.
    else 
12.
13.
        box.style.display = "none"; 
14.
        LINK.style.backgroundColor = "#00ff00"; 
15.
16.
}
Ist natürlich __nicht getestet__ aber den Vorgang sollte man doch verstehen können oder !? *g*


Eine schönes Wochenende
~Arano
Bitte warten ..
Mitglied: mreske
29.01.2011 um 17:50 Uhr
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
Bitte warten ..
Mitglied: Arano
29.01.2011 um 18:04 Uhr
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
Bitte warten ..
Mitglied: mreske
31.01.2011 um 12:31 Uhr
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
Bitte warten ..
Mitglied: Arano
31.01.2011 um 21:26 Uhr
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
Bitte warten ..
Mitglied: mreske
01.02.2011 um 09:23 Uhr
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
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
Windows 7
Kopierte Dateien im Hintergrund anzeigen (1)

Frage von MichiBLNN zum Thema Windows 7 ...

Erkennung und -Abwehr
Lokale Virenprüfstation : Windows 10: Ändern von Einstellungen verhinden (5)

Frage von TryAndSolve zum Thema Erkennung und -Abwehr ...

Windows Server
gelöst Word 2010 : Absatz - Abstand per GPO ändern (3)

Frage von johanna-p zum Thema Windows Server ...

Heiß diskutierte Inhalte
Microsoft
Ordner mit LW-Buchstaben versehen und benennen (20)

Frage von Xaero1982 zum Thema Microsoft ...

Outlook & Mail
gelöst Outlook 2010 findet ost datei nicht (19)

Frage von Floh21 zum Thema Outlook & Mail ...

Netzwerkmanagement
gelöst Anregungen, kleiner Betrieb, IT-Umgebung (18)

Frage von Unwichtig zum Thema Netzwerkmanagement ...