Top-Themen

Aktuelle Themen (A bis Z)

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, 6887 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
JavaScript
Aktualisieren von DIV Containern per JavaScript
gelöst Frage von wiesi200JavaScript4 Kommentare

Hallo erstmal. aktuell Programmiere ich eine Webseite zur Statusanzeige unserer Fertigungsmaschinen. Ansich nicht's spannendes. Der Grundaufbau ist aktuell vereinfacht ...

Entwicklung
Input Text öffnet div tag
gelöst Frage von jochengEntwicklung22 Kommentare

Hallo Leute Ich suche nach einem ganz einfachen weg ein Div durch ein <input type text zu öffnen (nur ...

Microsoft Office
Excel Zelle durch anklicken farbe ändern
gelöst Frage von kingMicrosoft Office3 Kommentare

Hallo Zusammen Mein Problem ist, dass ich eine Zelle mi Text habe. Diese soll jetzt durch anklicken sich farblich ...

PHP
Inhalt eines divs ohne Javascript ändern!
gelöst Frage von LordKimahriPHP5 Kommentare

Ich suche derzeit nach einer brauchbaren alternative mein "Content-Div" per klick auf einen Link mit Inhalt zu versorgen, derzeit ...

Neue Wissensbeiträge
Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 8 StundenWindows 101 Kommentar

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Sicherheits-Tools

Achtung: Sicherheitslücke im FortiClient VPN-Client

Tipp von kgborn vor 9 StundenSicherheits-Tools

Ich weiß nicht, wie häufig die NextGeneration Endpoint Protection-Lösung von Fortinet in deutschen Unternehmen eingesetzt wird. An dieser Stelle ...

Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 23 StundenInternet3 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 1 TagDSL, VDSL2 Kommentare

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Heiß diskutierte Inhalte
TK-Netze & Geräte
VPN-fähige IP-Telefone
Frage von the-buccaneerTK-Netze & Geräte16 Kommentare

Hi! Weiss noch jemand ein VPN-fähiges IP-Telefon mit dem man z.B. einen Heimarbeitsplatz gesichert anbinden könnte? Habe nur einen ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...

Windows Server
Anmeldung direkt am DC nicht möglich
Frage von ThomasGrWindows Server16 Kommentare

Hallo, ich habe bei unserem Server 2016 Standard ein Problem. Keine Ahnung wie das auf einmal passiert ist. Ich ...

Windows Server
KMS Facts for Client configuration
Frage von winlinWindows Server12 Kommentare

Hey Leute, wir haben in unserem Netz nun einen neuen KMS Server. Haben Bestands-VMs die noch nicht aktiviert sind. ...