✔ Aufklappliste schliessen

Hi,

ich springe hier mal eben ein, und poste eine valide (= regelkonforme) Alternative zu Psychodelics Code, denn ein Inline-Element (= <a>) darf gemäß der HTML-Elementreferenz kein Block-Element (= <div>) in sich enthalten.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-21" />
<title>tutorials.de</title>

<script type="text/javascript">
/* <![CDATA[ */
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';
maincat[2] = 'cat3';
maincat[3] = 'cat4';

function show(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

                document.getElementById(divid).style.display="inline";
        }
        else
        {
                document.getElementById(divid).style.display="none";
        }
}
/* ]]> */
</script>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
ul a {
display:block;
width:100%;
}
/* ]]> */
</style>

</head>
<body>

<ul>
    <li>
        <a href="#" onclick="show('cat1')">Link 1</a>
        <div id="cat1" style="display:none">Content 1</div>
    </li>
    <li>
        <a href="#" onclick="show('cat2')">Link 2</a>
        <div id="cat2" style="display:none">Content 2</div>
    </li>
    <li>
        <a href="#" onclick="show('cat3')">Link 3</a>
        <div id="cat3" style="display:none">Content 3</div>
    </li>
    <li>
        <a href="#" onclick="show('cat4')">Link 4</a>
        <div id="cat4" style="display:none">Content 4</div>
    </li>
</ul>

</body>
</html>


mfg Maik
 
super danke,

das ging jetzt aber schnell

Gruß wayne

Sag mal, eine Frage hätte ich da noch :-)

Wie kann ich jeweils das angeklickte mit einer seperate Farbe highlighten. So das immer das angewählte eine andere Färbung erhält?

Danke und Grüße

wayne
 
Die hinzugekommenen Komponenten hab ich hier im Code fett markiert:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-21" />
<title>tutorials.de</title>

<script type="text/javascript">
/* <![CDATA[ */
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';
maincat[2] = 'cat3';
maincat[3] = 'cat4';

function show(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

                document.getElementById(divid).style.display="inline";
        }
        else
        {
                document.getElementById(divid).style.display="none";
        }
}


function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
/* ]]> */
</script>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
ul a {
display:block;
width:100%;
}
a.nav {
color:#000;
background:#f2f2f2;
}
a.nav:hover, a.clicked {
color:#f2f2f2;
background:#000;
}
/* ]]> */
</style>

</head>
<body>

<ul>
    <li>
        <a href="#link1" class="nav" onclick="show('cat1');aktivieren(this.href)">Link 1</a>
        <div id="cat1" style="display:none">Content 1</div>
    </li>
    <li>
        <a href="#link2" class="nav" onclick="show('cat2');aktivieren(this.href)">Link 2</a>
        <div id="cat2" style="display:none">Content 2</div>
    </li>
    <li>
        <a href="#link3" class="nav" onclick="show('cat3');aktivieren(this.href)">Link 3</a>
        <div id="cat3" style="display:none">Content 3</div>
    </li>
    <li>
        <a href="#link4" class="nav" onclick="show('cat4');aktivieren(this.href)">Link 4</a>
        <div id="cat4" style="display:none">Content 4</div>
    </li>
</ul>

</body>
</html>


mfg Maik
 
Das ist schon ganz cool.

geht das auch mit 2 verschiedene Bilder also gifs

pro menue punkt 2 versionen

beispiel

Menü1_grau.gif >>> Menü1_rot.gif

Menü2_grau.gif >>>>Menü2_rot.gif

usw.

Ich hoffe Du verstehst das irgend wie :-)


Gruß wayne
 
Selbstverständlich verstehe ich, was du meinst bzw. dir vorschwebt. Und genau so, wie du es eben umschrieben hast, wird es in der Praxis auch realisiert.

Wo ist also das Problem, deine Wunschvorstellungen selbständig in die Tat umzusetzen?

Mir scheint, du verkennst hier den Sinn unseres Forums, der da nicht heißt "tutorials.de - User erfüllen Usern ihre Wünsche", sondern "tutorials.de - User helfen Usern".

Setz dich also bitte jetzt erstmal d'ran, dein erkorenes Erscheinungsbild für das Menü selbständig zu entwickeln, indem du mein letztes Codebeispiel dahingehend abänderst, dass da keine zwei Hintergrundfarben, sondern eben zwei Hintergrundbilder gegenseitig getauscht werden.

Die relevante Fachlektüre aus der CSS-Spezifikation und eines meiner CSS-Tutorials, das hier wunderbar als Leitfaden zum Nachschlagen und Studieren reinpaßt, gebe ich dir gerne mit auf den Weg, damit du nicht völlig in der Luft hängst :)


Wenn du mit deiner selbstgesteckten Zielsetzung nicht klarkommst, kannst du dich gerne mit deiner überarbeiteten Code-Fassung hier melden, damit man darüber reden kann, wo darin der Knackpunkt verborgen liegt.

Viel Erfolg :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück