[Løst]Hvordan utheve aktiv side i navigasjonsmeny?

Hyacinth · 9. februar 2010

Hei.

Jeg er omtrent nybegynner i Webdesign og prøver å lage en nettside som er delt opp i seksjoner, der hver seksjon vises eller skjules etter hva som velges i en navigasjonsmeny. Alt innhold er altså på en enkelt side i stedet for i flere filer.

Jeg får til en hover-effekt i menyen med CSS. Jeg ønsker også at det navigasjonsvalget som er aktivt skal utheves. Dette får jeg til med Javascript, men problemet er at hover-effekten slutter å virke for de navigasjonsvalgene som allerede er klikket på. Jeg lurer på om dette skyldes at jeg endrer bakgrunnen for navigasjonselementer med Javascript. Her er en (ganske lang) forkortet versjon av både XHTML, CSS og Javascript hvis noen orker å se på hva som kan være feil:

<!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" lang="no" xml:lang="no">

<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>Navigasjonstest</title>
   <style type="text/css" media="all">
       body {
           font: 80% arial, helvetica, sans-serif;
           margin: 0;
       }

       #navigation {
           float:left;
           top: 0;
           width: 24em;
           background-color: #ff8c00;
           color: white;
       }

       #navigation ul {
           list-style: none;
           padding: 0;
           margin: 1em;
       }

       #navigation ul li a {
           display: block;
           line-height: 175%;
           color: white;
           background: #ffa333;
           text-decoration: none;
           padding: 0 0.5em;
           margin-bottom: 0.25em;
       }

       #navigation ul li a:hover {
           background: #ff8c00;
       }

       #content {
           margin: 0;
           border-left: 24em #ff8c00 solid;
           padding: 1em 1em 1em 4em;
       }

       h1 {
           font-size: 160%;
       }

       .chapter {
           display: none;
       }
   </style>

   <script type="text/javascript">
       var openChapterId = 'none';
       function Initialise() {            
           ChangeChapter('Side1');
           return false;
       }

       function ChangeChapter(theId) {
           if (openChapterId != 'none') {
              HideById(openChapterId);
              document.getElementById("nav" + openChapterId).style.backgroundColor = '#ffa333';
           }
           ShowById(theId);
           document.getElementById("nav" + theId).style.backgroundColor = '#ffc680';
           openChapterId = theId;
           return false;
       }

       function ShowById(theId) {
           var el = document.getElementById(theId);
           el.style.display="block";
           return false;
       }

       function HideById(theId) {
           var el = document.getElementById(theId);
           el.style.display="none";
           return false;
       }

   </script>
</head>

<body onload="return Initialise();">
   <div id="navigation">
       <ul>
           <li><a href="" id="navSide1" class="navItem" onclick="return ChangeChapter('Side1');">Side 1</a></li>
           <li><a href="" id="navSide2" class="navItem" onclick="return ChangeChapter('Side2');">Side 2</a></li>
           <li><a href="" id="navSide3" class="navItem" onclick="return ChangeChapter('Side3');">Side 3</a></li>
       </ul>
   </div>

   <div id="content">    
       <div id="Side1" class="chapter" style="display:block">
           <h1>Side 1</h1>
       </div>    
       <div id="Side2" class="chapter">
           <h1>Side2</h1>
       </div>    
       <div id="Side3" class="chapter">
           <h1>Side 3</h1>
       </div>
   </div>
</body>
</html>

Navtest.html

Kaptein Snus · 9. februar 2010

Du burde heller legge til en klasse som heter active eller noe når en av knappene i menyen blir klikket på. Da må du også huske å sjekke om noen av de har denne klassen fra før av, fjerne den og så legge den til på gjeldene

Hyacinth · 9. februar 2010

Flott! Det virker. Jeg bruker to forskjellige klasser for navigasjonsvalgene. Når en av dem velges gjør jeg:

document.getElementById('nav' + theId).className = 'navActive';

og når den ikke er valgt lenger:

document.getElementById('nav' + openChapterId).className = 'navItem';

Logg inn

[Løst]Hvordan utheve aktiv side i navigasjonsmeny?

Anbefalte innlegg

Hyacinth

Lenke til kommentar

Videoannonse

Kaptein Snus

Lenke til kommentar

Hyacinth

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer