Aktiv html menu med jquery

Her kan du få hjælp og stille spørgsmål til jQuery!
Besvar
john
Begynder
Indlæg:9
Tilmeldt:17. feb 2016, 12:25
Aktiv html menu med jquery

Indlæg af john » 6. maj 2016, 09:08

Hvordan får man en aktiv menu med jquery. Når man klikker på et menu element skal elementet have en baggrundsfarve og de andre menu elementer skal ikke ændre baggrundsfarve.

Jeg kan kun få det til at virke ved at linke internt. Men hvordan får man det til at virke hvis jeg nu vil linke til andre sider?

Billede

abekat
Begynder
Indlæg:7
Tilmeldt:3. sep 2015, 19:20

Re: Aktiv html menu med jquery

Indlæg af abekat » 19. maj 2016, 13:33

jeg tror du leder efter noget i denne stil

Kode: Vælg alt

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      
    </head>
    <style>
        ul{
    width: 100%;
}
        li{
            float: left;
            list-style: none;
            display: block;
             width: 50px;
            height: 50px;
            
        }
        a{
          display: block; 
            text-decoration: none;
            text-align: center;
        }
        
         .click{
           
            background-color: black;
            color: white;
            font-size: 24px;
        }
        .clearfix{
            clear: both;
            height: 0px;
            display: block;
        }
    </style>
 
    <body>
        <ul>
            <li>
                <a>1</a>
            </li>
            <li>
                <a>2</a>
            </li>
            <li>
                <a>3</a>
            </li>
            <li>
                <a>4</a>
            </li>
            <li>
                <a>5</a>
            </li>
            <div class="clearfix"></div>
        </ul>
        
        <script>
            $(document).ready(function(){
                
                $("a").click(function(){
                     $("a").removeClass("click");
                   $(this).addClass("click");
                });
            });
        </script>
    </body>
</html>



john
Begynder
Indlæg:9
Tilmeldt:17. feb 2016, 12:25

Re: Aktiv html menu med jquery

Indlæg af john » 19. maj 2016, 16:53

Det jo nærmest det samme som jeg havde skrevet.
Jeg vil have at menuen skal være aktiv selvom et punkt linker til en anden hjemmeside.

Et godt eksempel er w3schools side. Der kan du se at det valgte menupunkt har en grøn baggrundsfarve som i dette tilfælde er html og html home.
Billede

Besvar