Hacer aparecer algo con un click y que permanezca

[SonrisaCs]

Buenas noches, tengo una duda, preciso que al hacer click en un elemento, en ésta caso "li>a" aparezca seguido a éste un div (trian), pero lo único que consigo es que el div se vea sólo en el momento que hago click, osea que desaparece instantaneamente... El código es el sig:

Código Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $("li>a").click(function() {
            $(this).after("<div class='trian'></div>");
        });
    });
</script>
 

¿Cómo lo soluciono?

Otra cosa, el "li>a" es un elemento de una navbar, quisiera que el jquery se ejecutara sólo cuando se haga click en el li y esté éste en uso, osea seleccionado, y que cuando se marque otro li suceda lo mismo y se desmarque el anterior, se entiende? Osea que quede marcado sólo cuando se seleccione

Gracias y saludos!

[Trublux]

Lo que te pasa es que cuando haces click, el elemento aparece y el evento (el click) sigue y se va a la página que tiene el enlace en el href (que suponiendo que esté vacío) te recarga la página.
Lo que tienes que hacer es detener el elemento "click" del href con "event.preventDefault()", sería algo así:

Código Javascript:

$(function(){
    $("li>a").click(function(event) {
        event.preventDefault();
        $(this).after("<div class='trian'></div>");
    });
});
 

P.D.: Yo pongo "$(function(){ ... });" pero es lo mismo que "$(document).ready(function() { ... });".

[SonrisaCs]

Iniciado por Trublux

Lo que te pasa es que cuando haces click, el elemento aparece y el evento (el click) sigue y se va a la página que tiene el enlace en el href (que suponiendo que esté vacío) te recarga la página.
Lo que tienes que hacer es detener el elemento "click" del href con "event.preventDefault()", sería algo así:

Código Javascript:

$(function(){
    $("li>a").click(function(event) {
        event.preventDefault();
        $(this).after("<div class='trian'></div>");
    });
});
 

P.D.: Yo pongo "$(function(){ ... });" pero es lo mismo que "$(document).ready(function() { ... });".

¡Me sirvió! ¡Muchas gracias! Pero ahora lo que sucede es que hago click en otro y sigue el anterior seleccionado, cómo hago para quitarlo cuando se seleccione otro? Gracias de antemano!

[SonrisaCs]

Iniciado por SonrisaCs

¡Me sirvió! ¡Muchas gracias! Pero ahora lo que sucede es que hago click en otro y sigue el anterior seleccionado, cómo hago para quitarlo cuando se seleccione otro? Gracias de antemano!

Ahora que miro bien no sólo se van marcando todos juntos sino que el "a" del "li" queda inservible, no cumple la función de enlace, no me redirecciona a otra página

[Trublux]

Si quieres que te vaya a la página, entonces no necesitas hacerlo por JQuery, haz que el enlace vaya a la página y cuando "pintes" el enlace de la página en el que estás pinta también el div que quieres.

[SonrisaCs]

Iniciado por Trublux

Si quieres que te vaya a la página, entonces no necesitas hacerlo por JQuery, haz que el enlace vaya a la página y cuando "pintes" el enlace de la página en el que estás pinta también el div que quieres.

Disculpá mi ignorancia pero no comprendí, cómo que no lo haga con jq? A qué cosa? A los enlaces los tengo normales con etiquetas <a>, pero con el código jq no funcionanl, tal vez me expresé mal anteriormente, o no, pero no logro entender jajajaj gracias por responder! Saludos

[Trublux]

A ver, con el JS que puse el evento del enlace no se ejecuta (el event.preventDefault), puse eso porque pensaba que lo que querías era mostrar el div y ya está (sin ir al enlace).
Lo que digo es que si quieres que vaya a la página y muestre el div, no necesitas hacerlo por js, cuando estés pintando el enlace de la página en donde estás, pintas el div y ya está, no necesitas js para nada.

[SonrisaCs]

Iniciado por Trublux

A ver, con el JS que puse el evento del enlace no se ejecuta (el event.preventDefault), puse eso porque pensaba que lo que querías era mostrar el div y ya está (sin ir al enlace).
Lo que digo es que si quieres que vaya a la página y muestre el div, no necesitas hacerlo por js, cuando estés pintando el enlace de la página en donde estás, pintas el div y ya está, no necesitas js para nada.

Pintar vendría a ser como "aparecer"? :/ Creo que ya entendí, lo que decís es que directamente en la otra página coloque el div y ya, no?
El tema es el siguiente, éste contenido está en el navbar, dentro del header...
Y el header se incluye en el index, con php, osea son archivos separados, y la navbar cambia del index.php (por ejemplo) a contacto.php, por lo que no puedo simplemente agregar el div en contacto.php, ya que la nav está en header... Me explico? De todas maneras gracias por responder, y disculpá las molestias