• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

pseudoklasse visited

B

bonbon-drop

Neues Mitglied
Hallo zusammen,
ich glaube ich bin zu doof. Ich will einen link nach dem Besuch mit visited anders gestalten, aber es klappt nicht.
Kann sich das mal jemand anschauen? Danke
Habe das gefühl das er immer wieder mit lnk überschrieben wird, weiß aber nicht warum
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD 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=utf-8" />
<title>Unbenanntes Dokument</title>



<style type="text/css">
a:link { text-decoration:none; font-size:80px; font-weight:bold; color:#41403e; }
a:visited { text-decoration:none; font-size:8px; color:#800000; }

</style>


        <!-- Javascript -->
        <script type="text/javascript">        
            function showHideLayer(id){
                e = document.getElementById(id);
                if(e.style.display=="block"){
                    e.style.display = "none";
                } else {
                    e.style.display = "block";
                }
            }
        </script>
</head>

<body>





<div style= "text-align:left;"><blockquote>
     <blockquote><!-- Link zum Anzeigen/Verstecken -->
    <a href="alternativerLink" onclick="showHideLayer('meinLayer');return(false)">Habt ihr euch das wirklich gut &uuml;berlegt?</a>
    <div id="meinLayer" style="display:none;">NEIN! Es war eine rein spontane Entscheidung an der Theke. Verena hat meine Frage nicht richtig verstanden und mit einem "Von mir aus" beantwortet.
    </div> <br>
    
    
    
    <a href="alternativerLink1" onclick="showHideLayer('meinLayer1');return(false)">Anzeigen/Verstecken1</a>
    <div id="meinLayer1" style="display:none;">Mein verstecktes Layer1
    </div> <br>
    
    <a href="alternativerLink2" onclick="showHideLayer('meinLayer2');return(false)">Anzeigen/Verstecken2</a>
    <div id="meinLayer2" style="display:none;">Mein verstecktes Layer2
    </div> <br></blockquote></blockquote></div>
</body>
</html>
 
Werbung:
HTML: 
onclick="showHideLayer('meinLayer1');return(false)"
ist natürlich falsch.. was soll das return da? So gehts
HTML: 
    <a href="#" onclick="showHideLayer('meinLayer1')">Anzeigen/Verstecken1</a>

Edit: Du solltest außerdem auf validen Code achten.. so gehts:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD 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=utf-8" />
<title>Unbenanntes Dokument</title>



<style type="text/css">
a:link { text-decoration:none; font-size:80px; font-weight:bold; color:#41403e; }
a:visited { text-decoration:none; font-size:8px; color:#800000; }

</style>


        <!-- Javascript -->
        <script type="text/javascript">        
            function showHideLayer(id){
                e = document.getElementById(id);
                if(e.style.display=="block"){
                    e.style.display = "none";
                } else {
                    e.style.display = "block";
                }
            }
        </script>
</head>

<body>





<div style= "text-align:left;">
    <a href="#11" onclick="showHideLayer('meinLayer')">Habt ihr euch das wirklich gut &uuml;berlegt?</a>
    <div id="meinLayer" style="display:none;">NEIN! Es war eine rein spontane Entscheidung an der Theke. Verena hat meine Frage nicht richtig verstanden und mit einem "Von mir aus" beantwortet.
    </div> <br />
    
    
    <a href="#22" onclick="showHideLayer('meinLayer1')">Anzeigen/Verstecken1</a>
    <div id="meinLayer1" style="display:none;">Mein verstecktes Layer1
    </div> <br />
    
    <a href="#33" onclick="showHideLayer('meinLayer2')">Anzeigen/Verstecken2</a>
    <div id="meinLayer2" style="display:none;">Mein verstecktes Layer2
    </div>
</div>
</body>
</html>
 
Hallo all,

dises Script hatte ich auch gefunden, aber alledings auch mit "return=false". Aber der richtige Code wurde ja gepostet :D
Ich habe von sowas leider überhaupt keine Ahnung!!! Deshalb war ich froh, das ein solches Script komplet gepostet wurde! Danke!!!

Nun zu meinen eigentlichen Anliegen. Dieses Script möchte ich gern auf einer FAQ-Seite verwenden. Was mich stört, ist das man den geöffneten Layer wieder schließen muß. Bei einer FAQ-Seite (mit mehr als 30 Fragen und dazugehörigen Antworten) denke ich, nerft das den User dann.
Wie müßte das ganze geschrieben sein, das, egal welcher Layer gerade geöffnet ist, sich dieser bei anklicken eines anderen (egal welchen) Link, sich dieser schließt. So das immer nur ein Layer offen ist.
Soll im Klartext heißen:
Der User möchte Frage 3 beantwortet haben und klickt den Link 3 an. Layer 3 öffnet sich.
Nun möchte er aber zu Frage 25 eine Antwort und klickt Link 25 an, welcher sich öffnet. Gleichzeitig sollte jetzt aber Layer 3 geschlossen werden.
Also nur ein Layer sollte offen sein.

Wie gesgat ich habe keine Ahnung von so was und bin daher immer froh, wenn solche kompletten Scripte gepostet werden.
Hoffe da auf eure Hilfe und bedanke mich schon einmal ganz lieb im voraus!!!!!!!!

Grüße SD
 
Werbung:
Willkommen im Forum.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>FAQ Accordion Demo</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            /*<![CDATA[*/

            $(function () {
                $('#faq dd').hide();
                $('#faq dt').bind('click', function () {
                    $myDd = $(this).next('dd');

                    $('#faq dd:visible').not($myDd).each(function (index, element) {
                        $(element).hide('normal');
                    });

                    if ($myDd.is(':hidden')) {
                        $myDd.show('normal');
                    } else {
                        $myDd.hide('normal');
                    }
                });
            });

            /*]]>*/
        </script>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 14px;
                padding: 3em;
            }

            #faq dt {
                cursor: pointer;
                padding: 0.5em 1em;
                border: 1px solid #eee;
            }

            #faq dt:hover {
                background: #f3f382;
            }

            #faq dd {
                padding: 1em 3em;
                margin-left: 3em;
            }

        </style>
    </head>

    <body>

        <dl id="faq">
            <dt>Frage 1</dt>
            <dd><p>Antwort 1</p></dd>

            <dt>Frage 2</dt>
            <dd>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a lacinia mauris. Ut consectetur ullamcorper dolor, non sollicitudin risus vestibulum sed. Ut velit diam, aliquet quis consequat at, placerat at tellus. Fusce tincidunt, ante ut congue tempus, purus erat fringilla libero, at hendrerit nibh lorem ac ante. Proin lobortis odio id lacus mattis mattis. Duis dapibus consectetur rhoncus. Quisque laoreet dolor eget velit imperdiet ultrices. Vivamus semper est ac massa lacinia vitae feugiat arcu feugiat. Pellentesque ligula nisi, feugiat a bibendum pellentesque, aliquet nec dui. Maecenas non nunc diam, sit amet hendrerit neque. Phasellus pulvinar gravida cursus.</p>
                <p>Morbi eget fringilla justo. Proin nec libero purus, eu imperdiet augue. Ut vitae diam leo. Integer urna mauris, sollicitudin id tempor at, vulputate ac arcu. Fusce nec vehicula eros. Aliquam et nulla turpis, ut suscipit nisi. Quisque venenatis semper nisl sit amet consectetur. Integer varius, ipsum ac auctor bibendum, enim risus mollis mauris, non fringilla massa tellus nec arcu. Praesent eget odio non purus suscipit dapibus. Duis auctor quam vel purus porta commodo. Nam suscipit turpis sit amet quam egestas auctor. Mauris nec faucibus sem. Suspendisse sit amet dui ut nulla tincidunt posuere. Ut blandit aliquam lorem, vitae interdum velit dictum id. </p>
            </dd>

            <dt>Frage 3</dt>
            <dd><p>Antwort 3</p></dd>

            <dt>Frage 4</dt>
            <dd><p>Antwort 4</p></dd>
        </dl>

    </body>

</html>

Suchbegriff wäre eben „javascript accordion“ oder „jquery accordion“.
 
Hallo mermshaus,

leider habe ich nur zwei Daumen.:sad: Hätte ich mehr, würde ich auch diese in die Höhe strecken. Na ja, nehm ich halt die Fußzehen noch dazu :mrgreen::mrgreen::mrgreen:.
Einfach super!!!! hätte ich gleich nochmal hier her geschaut ....
Habe nach meinem Post gleich ein Script gefunden und angepasst. Jedoch kann man nur mit anklicken einer nächsten Frage die vorherige Antwort schließen (geht so auch...).
Aber das von dir gepostete Script ist einfach genial :D
Nun hab ich meine FAQ-Seite schon einige Tage fertig im Netz, aber jetzt werde ich nochmal alles ummodeln nach deinem geposteten Script. Denn es funktioniert auch bei meinem Anbieter. (was nicht selbstverständlich ist). Um so größer ist meine Freude, das dein Script funktioniert. Also werd ich mich gleich mal an die Arbeit machen.

Mein Script (eventuell kann es ja jemand gebrauchen):
HTML: 
<head>
<script type="text/javascript">
// <![CDATA[
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}
// ]]>
</script>

<style type="text/css" media="screen">
/*<![CDATA[*/
<!--

a.faq:link {text-decoration: none; color: #f27b00;}
a.faq:visited {text-decoration: none; color: #ffcc00;}
a.faq:hover {text-decoration: underline; color: #0099ff; font-weight:bold;}
a.faq:active {text-decoration: none; color: #0099ff;}

-->
/*]]>*/
</style>    </head>      <body><div style="text-align: left;">
<p>
        <a class="faq" onclick="anzeigen('a1')" href="#Algemeines01">Frage 1?</a>
    </p>
<div id="a1" style="display: none;">
<p>&nbsp;</p>
<p style="padding-left: 30px;">
            <span style="color: #ff9933;">Dies wäre dann der erste Text zu Frage 1!</small></span>
        </p>
<p>&nbsp;</p>
</div>
<p>
        <a class="faq" onclick="anzeigen('a2')" href="#Algemeines02">Frage 2?</a>
    </p>
<div id="a2" style="display: none;">
<p>&nbsp;</p>
<p style="padding-left: 30px;">
            <span style="color: #ff9933;">Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der erste Text  zu Frage 2! Dies wäre dann der erste Text zu Frage 2! Dies wäre dann der  erste Text zu Frage 2!</span>
        </p>
<p>&nbsp;</p>
</div>
<p>
        <a class="faq" onclick="anzeigen('a3')" href="#Algemeines03">Frage 3?</a>
    </p>
<div id="a3" style="display: none;">
<p>&nbsp;</p>
<p style="padding-left: 30px;">
            <span style="color: #ff9933;">Dies wäre dann der erste Text zu Frage 3! Dies wäre dann der erste Text  zu Frage 3! Dies wäre dann der erste Text zu Frage 3! Dies wäre dann der  erste Text zu Frage 3!</span>
        </p>
<p>&nbsp;</p>
</div>
<p>
        <a class="faq" onclick="anzeigen('a4')" href="#Algemeines04">Frage 4?</a>
    </p>
<div id="a4" style="display: none;">
<p>&nbsp;</p>
<p style="padding-left: 30px;">
            <span style="color: #ff9933;">Dies wäre dann der erste Text zu Frage 4! Dies wäre dann der erste Text  zu Frage 4! Dies wäre dann der erste Text zu Frage 4! Dies wäre dann der  erste Text zu Frage 4!</span>
        </p>
<p>&nbsp;</p>
</div>
</div>

</body> 
</html>

Thx!!!! nochmal für die schnelle und SUPER hilfreiche Antwort (=kompletten Script). So kann man als völlig Ahnungsloser gleich loslegen!!!!!!!!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben