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, 6722 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 ..
Ähnliche Inhalte
Neue Wissensbeiträge
RedHat, CentOS, Fedora

Fedora, RedHat, Centos: DNS-Search Domain setzen

(9)

Tipp von Frank zum Thema RedHat, CentOS, Fedora ...

Drucker und Scanner

Samsung SL-M4025ND, firmware update und (kompatible) Tonerkassetten

(1)

Erfahrungsbericht von markus-1969 zum Thema Drucker und Scanner ...

Router & Routing

PfSense auf Supermicro Intel Xeon D-15x8 SoC Bare Bone

Tipp von Dobby zum Thema Router & Routing ...

Heiß diskutierte Inhalte
Windows 10
Windows für Privatanwender "nicht mehr handhabbar" (26)

Frage von FA-jka zum Thema Windows 10 ...

LAN, WAN, Wireless
Brauche Hilfe: Mit (schnellem) WLAN Strecke überbrücken (23)

Frage von pierrehansen zum Thema LAN, WAN, Wireless ...

Basic
Programmierung von Windows Programmen (10)

Frage von Ghost108 zum Thema Basic ...