web contenido estático

ALFAJOR · #1 (**permalink**) 07/02/2015, 19:40

Hola buenas,

Quizá sea una tontera y quizá no mi pregunta, espero se entienda.

La cosa es, quiero crear una web en la cual, sólo cambie o se refresque el contenido de la misma no así la página completa. Me explico.

En siguiente imagen, tenemos una cabecera, un pie de página, dos columnas que albergaran barras de navegación para el sitio. Y en medio el contenido que quiero que se actualice conforme hagamos clic en algún enlace de la barra de navegación.

Quiero que solamente cambie lo de en medio, lo demás no se refresque.

Espero se entienda

ipraetoriux · #2 (**permalink**) 07/02/2015, 21:54

...yo usaria JavaScript...puede ser un simple AJAX, o mejor aún; AngularJS, Backbone.js, etc, etc

LucasAddams · #3 (**permalink**) 07/02/2015, 23:12

Concuerdo con ipraetoriux, solo que yo lo haría con Jquery. Te doy un ejemplo simple, lo probas y me decís si es más o menos lo que querés:

Código HTML:

<head>
...
                <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
...
</head>

Y dentro del body:

Código HTML:

<body>
          <div id="menu">
				<a href="#">Películas</a>
				<a href="#">Juegos</a>
				<a href="#">Música</a>
				<a href="#">Videos</a>
				<a href="#">Series</a>
         </div><!--Fin de Menú-->

          <div id="Caja">
                                <div class="contenido"><img src="Ejemplo 1"></div>
                                <div class="contenido"><img src="Ejemplo 2"></div>
                                <div class="contenido"><img src="Ejemplo 3"></div>
                                <div class="contenido"><img src="Ejemplo 4"></div>
                                <div class="contenido"><img src="Ejemplo 5"></div>
          </div>
</body>

En el archivo.js -el script-

Código:

var tabInicial = 1;
$(document).on("ready", main);

function main(){
	$("#menu a").on("click", abrirTab);
	$(".contenido").eq(tabInicial-1).fadeIn();
	$("#menu a").eq(tabInicial-1).addClass("tabActual");
}

function abrirTab(){
	$(".contenido").hide();
	$("#menu a").removeClass("tabActual");
	$(".contenido").eq($(this).index()).fadeIn();
	$(this).addClass("tabActual");
	return false;
}

Ah, no te olvides de darle poner en el css un .tabactual{background: (el color que quieras);} para que funcione y puedas probar.

P/D: Tampoco te olvides de descargar el jquery-1.7.1.min.js y ponerlo en el head como indiqué al principio. Si es algo así, intenta interiorizar para manejarte mejor en estas cosirijillas.

ALFAJOR · #4 (**permalink**) 04/04/2015, 20:36

Hola a todos y gracias por responder, volví nuevamente a esta pregunta porque aún no lo resuelvo (sí, aún u.u)

Este es mi index, hice recién la estructura, he estado intentado hace lo que me dice LucasAddams, pero no doy con hacer funcionar.

Si alguien me da otra vuelta de tuerca puede que lo pille u otro ejemplo no se..

Les dejo lo que llevo hasta aquí
index.html

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<title>TodoVelero</title>

<meta charset="utf-8">
<meta name="description" content="" />

<style type="text/css">
/* --------- demo presentation------------ */
body {font: normal 16px/1.5em helvetica, aria, sans-serif; text-align: center;}
#demo-nav {width: 200px; margin: 10px auto; list-style: none; overflow: hidden}
#header, #footer {padding:5px; height: 50px; background: #0080FF; color:#fff}
#primary, #content, #secondary {height: 300px; padding: 50px 0}
#primary p, #content p, #secondary p {font-weight: bold}
#primary {background:#eee;}
#content {background:#819FF7;}
#secondary {background:#ddd;}
pre {text-align: left; margin:20px auto; width:100px}
/* --------------------------------------- */



/* ----- set width and center layout ----- */
#container {
	width:1200px;
	margin:20px auto;
}
/* --------------------------------------- */




/* ----------- float columns ------------- */
#primary {
	float:left;
	width:200px;
}

#content {
	float:left;
	width:800px;
}

#secondary {
	float:left;
	width:200px;
}
/* --------------------------------------- */




/* --------------------------------------- */
#footer {
	clear:both;
}
/* --------------------------------------- */

.menuizq{margin:0; padding:0; width:195px; list-style:none;background:rgb(255,255,255);}
.menuizq li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menuizq li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menuizq li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menuizq li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menuizq li a span{line-height:40px;}

.menuder{margin:0; padding:0; width:195px; list-style:none;background:rgb(255,255,255);}
.menuder li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menuder li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menuder li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menuder li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menuder li a span{line-height:40px;}
</style>

</head>

<body>

<div id="container">
	<div id="header">
		<p>TodoVelero</p>
	</div>
	
	<div id="primary">
<ul class="menuizq">
  <li><a href="#" class="active" target="_top"><span>Carpas</span></a></li>
  <li><a href="#"><span>Cubrecokpit</span></a></li>
  <li><a href="#"><span>Bimini Top</span></a></li>
  <li><a href="#"><span>Toldos</span></a></li>
  <li><a href="#"><span>Cierres/Ventanas</span></a></li>
</ul>

	</div>
	
	<div id="content">
Contenido
	</div>
	
	<div id="secondary">
<ul class="menuizq">
  <li><a href="#" class="active" target="_top"><span>Carpas</span></a></li>
  <li><a href="#"><span>Fundas velas</span></a></li>
  <li><a href="#"><span>Bolsillos</span></a></li>
  <li><a href="#"><span>Cojines</span></a></li>
  <li><a href="#"><span>Chubasqueras</span></a></li>
</ul>
	</div>
	
	<div id="footer">
		<p>Pie página</p>
	</div>
	
</div>

</body>
</html>

mbm150 · #5 (**permalink**) 05/04/2015, 06:58

Hola, yo creo que la mejor opción seria usar AngularJS, que es muy sencillo y ademas tendrás todas las URLs. Aqui esta la web: https://angularjs.org/.

De todas formas, para hacerlo de la forma que te dijo el compañero, te falta poner el script con el codigo jQuery, deberias incluirlo en el head, despues de la etiqueta </style>.

Código HTML:

Ver original<script src="js/jquery-1.7.1.min.js"></script>
<script>
var tabInicial = 1;
$(document).on("ready", main);
 
function main(){
    $("#menu a").on("click", abrirTab);
    $(".contenido").eq(tabInicial-1).fadeIn();
    $("#menu a").eq(tabInicial-1).addClass("tabActual");
}
 
function abrirTab(){
    $(".contenido").hide();
    $("#menu a").removeClass("tabActual");
    $(".contenido").eq($(this).index()).fadeIn();
    $(this).addClass("tabActual");
    return false;
}
</script>

Lo que te propone es que pongas todas las paginas que vayas a hacer (Todas las del menú) en la misma página, dentro de un div con class content cada una y al hacer click vas ocultando uno y mostrando otro. Por lo tanto, tendrias que crear un <div class="content"></div> y poner dentro lo que sea con cada una de las secciones de tu web dentro del propio index.

Código HTML:

Ver original<!--Donde tienes esto-->
<div id="content">
Contenido
</div>
<!--Cambiarlo por esto-->
<div class="content">
Contenido enlace 1 de menu
</div>
<div class="content">
Contenido enlace 2 de menu
</div>
etc.

Y claro, tendrías que cambiar en el CSS #content por .content. Pero esto tiene una pega, y es que la URL no cambia.

Yo creo que la mejor opción es usar AngularJS, pero tu decides. En la web tienes ejemplos: https://docs.angularjs.org/tutorial/step_07.