[SOLUCIONADO] cambiar contenido div jquery

[jmm87]

Hola buen dia se que de este tema ya se comento pero la verdad ninguna de las respuestas me soluciono mi problema por eso vuelvo a preguntar:

necesito cambiar el contenido de un div. Tengo el siguiente codigo:

en la pagina html llamo a jquery y a su funcion:

Código HTML:

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
    function cambiar(pagina) {
    $(‘#contenido’).fadeOut(1000);
    $(“#contenido”).load(pagina);
    $(‘#contenido’).fadeIn(1000);
    }
</script>
 

div que debe cambiar

Código HTML:

<div class="wrapper">
                    <div class="col" id="contenido"><br>
                        <h5>Bienvenidos!</h5>
                        <p class="pad_bot1">Somos una empresa con mas de 25 años de trayectoria en el mercado. La mejor opción para Empresas 
                        líderes, siendo elegibles por el <strong>compromiso, calidad e innovación</strong> de nuestros productos.</p>
                        <p class="pad_bot1">Nuestra mision es superar las expectativas de los clientes a través de la calidad de sus equipos basados en la seguridad alimentaría, su procedimiento y  
                        distribución de los mismos.</p>
                        <strong>SERPER</strong> transita desde sus comienzos un proceso de maduración y consolidación, donde su visión, misión y valores 
                        marcan su rumbo empresario<br><br>
                        <a href="historia.html">Leer mas...</a></li>
                    </div>
                    <div class="col0"><br>
                        <h5>Nosotros:</h5>
                        <ul id="lista">
                            <li><a href="javascript:cambiarcont('organizacion.html');">La organizacion</a</li>
                            <li><a href="productos.html">Misión, valores, Visión</a></li>
                            <li><a href="revestimientos.html">Cultura de la empresa</a></li>
                            <li><a href="repuestos.html">Organigrama</li>
                            <li><a href="Contacts.html">Estructura y departamentalizacion</a></li>
                            <li><a href="Contacts.html">Proceso de comunicación</a></li>
                            <li><a href="Contacts.html">La Dirección de la comunicación</a></li>
                        </ul>
                    </div>
                </div>
 

y el boton que dice que cambie el div:

Código HTML:

<ul id="lista">
                            <li><a href="javascript:cambiarcont('organizacion.html');">La organizacion</a</li>
                            
                        </ul>
 

[alberto510a]

Hola te pongo como creo yo que funcionaría y te explico.

Código Javascript:

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
    function cambiar(pagina) {
    $('#contenido').fadeOut(1000);
    $('#contenido').load(pagina);
    $('#contenido').fadeIn(1000);
    }
});
</script>
 

Código HTML:

<ul id="lista">
                            <li><a onclick="cambiar(http://www.tupagina.com/organizacion.html)">La organizacion</a</li>
                            
                        </ul>
 

1º Con jQuery debes poner $(document).ready sino no se inicializan las cosas.
2º si pasas por parametro una url ponla completa sino es posible que te problemas al cargar (http://www...)
3º esa forma de llamar a la función en el link yo no sé si sea posible así pero yo nunca la ví con onclick si que estoy seguro que sí.

Saludos y Suerte.

[ginitofl]

Hola tu funcion se llama cambiar por que pones cambiarcont?????

<li><a href="javascript:cambiarcont('organizacion.html'); ">La organizacion</a</li>

Saludos.

[jmm87]

Iniciado por ginitofl

Hola tu funcion se llama cambiar por que pones cambiarcont?????

<li><a href="javascript:cambiarcont('organizacion.html'); ">La organizacion</a</li>

Saludos.

me olvide de modificarlo antes de enviarlo.. igualmente no es el problema..tampoco funciona

[alberto510a]

me olvide de modificarlo antes de enviarlo.. igualmente no es el problema..tampoco funciona

¿Ya probaste lo que te dije?

[jmm87]

Iniciado por alberto510a

¿Ya probaste lo que te dije?

no funciona alberto:( ... evidentemente el problema esta en el momento que se le da el evento al boton

para mi es aca el problema

Código HTML:

<ul id="lista">
                            <li><a onclick="cambiar(http://www.tupagina.com/organizacion.html)">La organizacion</a</li>
                            
                        </ul>
 

por otro lado como pondria para probarlo localhost? porque si pongo toda la url no puedo

[alberto510a]

A ver es que con jQuery los eventos los consigues más fáciles pero trate de seguir el tuyo mira te pongo como yo lo haría:

Código HTML:

<ul id="lista">
                            <li><a id="organizacion">La organizacion</a</li>
                            
                        </ul>
 

Código Javascript:

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#organizacion').click(function(){
    $('#contenido').fadeOut(1000);
    $('#contenido').load('http://www.tupagina.com/organizacion.html');
    $('#contenido').fadeIn(1000);
    });
});
</script>
 

Esto te garantizo que funciona al 100% así que asegúrate de copiarlo tal cual :P

Saludos.

[jmm87]

Genioooooooooooooo funciona de 10!!!
que lucha esto! te agradezo muchisimo!

Me queda un pequeño detalle a ver si se puede solucionar.
cuando me paro sobre "el boton" de la lista el puntero de mousse se pone como el puntero de edicion de texto. es medio engañoso para el usuario-
te muestro como esta quedando
www.climatizacionserper.com.ar
es la lista de la izquierda la q me estas ayudando a editar

Iniciado por alberto510a

A ver es que con jQuery los eventos los consigues más fáciles pero trate de seguir el tuyo mira te pongo como yo lo haría:

Código HTML:

<ul id="lista">
                            <li><a id="organizacion">La organizacion</a</li>
                            
                        </ul>
 

Código Javascript:

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#organizacion').click(function(){
    $('#contenido').fadeOut(1000);
    $('#contenido').load('http://www.tupagina.com/organizacion.html');
    $('#contenido').fadeIn(1000);
    });
});
</script>
 

Esto te garantizo que funciona al 100% así que asegúrate de copiarlo tal cual :P

Saludos.

[alberto510a]

Hola.

Te contesto desde mi móvil pero creo que se a que te refieres de todas formas mañana me pasaré por tu web.

Verás poniéndole una propiedad del css que se llama cursor puedes conseguir distintos tipos de cursores como dice la palabra :P.

Supongamos que quieres un cursor de mano (el que usamos en los enlaces) haríamos así:

Código:

cursor:pointer; cursor:hand;
/*pongo 2 porque el primero funciona en todos los navegadores menos en Internet Explorer y el segundo al revés*/

O un cursor normal (la flecha):

Código:

cursor:default;

Saludos y suerte.

[jmm87]

Sos un capo hermano!!
solucione todo! Te debo muchas!!:D

Iniciado por alberto510a

Hola.

Te contesto desde mi móvil pero creo que se a que te refieres de todas formas mañana me pasaré por tu web.

Verás poniéndole una propiedad del css que se llama cursor puedes conseguir distintos tipos de cursores como dice la palabra :P.

Supongamos que quieres un cursor de mano (el que usamos en los enlaces) haríamos así:

Código:

cursor:pointer; cursor:hand;
/*pongo 2 porque el primero funciona en todos los navegadores menos en Internet Explorer y el segundo al revés*/

O un cursor normal (la flecha):

Código:

cursor:default;

Saludos y suerte.