Untitled


<!DOCTYPE html>

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style>

    .menu a, .menu a:visited {
        font-family: helvetica, arial;
        font-size: 10px;
        color:white;
        text-shadow:0px 0px 5px black;
        text-decoration: none;
        padding:15px;
        margin: 0 20px;
    }

    .menu a:hover, .menu a.current {
        background-color: rgba(0,0,0,0.7);
        padding:15px;
        text-shadow: none;
        text-decoration: none;
        border-radius: 8px;
    }

    .menu {
        margin-top:40px;
        text-align:center;
    }

</style>

<!-- Loader jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
    // tjekker at siden er loadet -->
    $(document).ready(function() {

        // Sætter en click funktion på alle links inde i .menu
        $('.menu a').click(function(){
            // fjerner classen "current" fra alle links inde i .menu
            $('.menu a').removeClass('current');
            // tilføjer classen "current" til det link du lige har klikket på
            $(this).addClass('current');
        });
    });
</script>
</head>

<body>


<div class="menu">
<a href="#">FORSIDE</a>
<a href="#">UNDERSIDE</a>
<a href="#">OGSAAVIDERE</a>
</div>

</body>

</html>