Hola compañeros!
Gracias a algunos de vosotros he podido realizar algunas cosas en Javascript en la web que estoy desarrollando. Soy novato y la verdad que tengo conocimientos escasos de javascript pero me voy adaptando y aprendiendo sobre la marcha. Por consiguiente os estaré eternamente agradecido si me podéis echar un cable para resolver el siguiente problema:
Os explico, en las secciones de la página "activitats": "hàbits", "activitats", "festes" y "sortides" hay un menú en cada uno que al clicar en cada una de las actividades sale un texto y una imagen a la derecha. Para indicar en que actividad te encuentras he usado el texto en bold y una flechita a la derecha de la actividad.
Mi pregunta sería, como puedo hacer que al cargar la página tenga por defecto las primeras actividades de cada sección con el estilo que anteriormente he comentado (bold y flechita) y al clicar en alguna de las actividades cambie el estilo por normal y sin flechita?
os dejo la url: http://escoletasestel.com/activitats.html
Código:
texto html
<ul class="submenu_links">
<li class="habits"><a style='cursor: pointer;' value="Arribada" onClick="Arribada();">Arribada</a></li>
<li><a style='cursor: pointer;' value="ActivitatDirigida" onClick="ActivitatDirigida();">Activitat Dirigida</a></li>
<li><a style='cursor: pointer;' value="foto" onClick="Berenar();">Berenar</a></li>
<li><a style='cursor: pointer;' value="Pati" onClick="Pati();">Pati</a></li>
<li><a style='cursor: pointer;' value="Higiene" onClick="Higiene();">Higiene</a></li>
<li><a style='cursor: pointer;' value="Dinar" onClick="Dinar();">Dinar</a></li>
<li><a style='cursor: pointer;' value="Dormir" onClick="Dormir();">Dormir</a></li>
</ul>
<div id="cambiotexto1"></div>
<div id="imagen1"></div>
Código:
Script
$(document).ready(function() {
$(".submenu_links li a").click(function () {
$(".submenu_links li a").removeClass("hover");
$(this).addClass("hover");
});
});
$(document).ready(function() {
$(".submenu_links1 li a").click(function () {
$(".submenu_links1 li a").removeClass("hover");
$(this).addClass("hover");
});
});
$(document).ready(function() {
$(".submenu_links2 li a").click(function () {
$(".submenu_links2 li a").removeClass("hover");
$(this).addClass("hover");
});
});
$(document).ready(function() {
$(".submenu_links3 li a").click(function () {
$(".submenu_links3 li a").removeClass("hover");
$(this).addClass("hover");
});
});
Código:
CSS
.submenu_links li a:hover, .submenu_links li a:active, .submenu_links1 li a:hover,
.submenu_links1 li a:active, .submenu_links2 li a:hover, .submenu_links2 li a:active,
.submenu_links3 li a:hover, .submenu_links3 li a:active, .hover { font-weight: bold;
background: url("flechita_links.gif") right no-repeat;
color: #15A567;
padding-right: 15px; }