He seguido varios de los ejemplos de este post, pero no ha funcionado en Blogger al momento de cambiar la almohadilla (#) por una URL.
Inserté lo siguiente en el <head>
del documento.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
Además, inserté el HTML en un gatget:
<div id="main">
<ul>
<li><a id="inicio" href="http://bpbmsm.blogspot.pe/">Inicio</a></li>
<li><a id="nosotros" href="http://bpbmsm.blogspot.pe/p/pagina1">Sobre nosotros</a></li>
<li><a id="producto" href="http://bpbmsm.blogspot.pe/p/pagina2">Producto</a></li>
<li><a id="contacto" href="http://bpbmsm.blogspot.pe/search/label/etiqueta1">Contacto</a></li>
</ul>
</div>
Todo lo demás lo dejé como estaba.
Por otro lado, el siguiente script, también lo inserté dentro del head
:
$(function() {
$("#main ul li a").click(function() {
// quitar .seleccionado a todos (por si hay alguno)
$("#main ul li a").removeClass("seleccionado");
// agregar seleccionado a "este" elemento.
$(this).addClass("seleccionado");
});
});
Utilizo este blog para probar: http://bpbmsm.blogspot.pe/