Jose Anrtonio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Listas 4</title>
    <style type="text/css">
        #header {
            float:left;
            width:100%;
            font-size:93%;
            line-height:normal;
            background:#DAE0D2 url("imagenes/bg.gif") repeat-x bottom;
        }

        #header ul {
            margin:0;
            padding:0;
            list-style:none;
        }

        #header a {
            display:block;
            background:url("imagenes/right.gif") no-repeat right top;
            padding:5px 15px 4px 6px;
            text-decoration:none;
            font-weight:bold;
            color:#765;
        }

        #header li {
            float:left;
            background:url("imagenes/left.gif");
              no-repeat left top;
            margin:0;
            padding:0 0 0 9px;
        }

        #header .current {
            background-image:url("imagenes/left_on.gif");
        }

        #header .current a {
            background-image:url("imagenes/right_on.gif");
            padding-bottom:5px;
        }


    </style>

    <script type="text/javascript">
        function activo(elemento)
        {
            var elementos=document.getElementsByTagName("li");

            for (var i=0;i<elementos.length;i++)
            {
                elementos[i].removeAttribute("class");
            }

            elemento.setAttribute("class", "current");
        }
    </script>
</head>
<body>
    <div id="header">
      <ul>
        <li onclick="activo(this)"><a href="#">Home</a></li>
        <li class="current" onclick="activo(this)"><a href="#">News</a></li>
        <li onclick="activo(this)"><a href="#">Products</a></li>
        <li onclick="activo(this)"><a href="#">About</a></li>
        <li onclick="activo(this)"><a href="#">Contact</a></li>
      </ul>
    </div>
</body>
</html>