Hola a todos;
Estoy creando una pagina personal para mostrar las esculturas de mi hermano y estoy teniendo problemas para hacer que los div desaparezcan y cambien por otros.
A ver si me explico bien:
Estoy creando una pagina con bootstrap y JQuery en la parte superior tengo un nav con varios botones que al pulsarlos hacen que desaparezca el div que se esta mostrando y aparezca otro. Hasta ahí todo bien, el tema es que el div que se muestra al principio tiene cuatro botones que en principio harían la misma funcion que el nav, hace que desaparezca el div pero no aparece el otro. El tema es que el código Jquey es el mismo para los dos. así que no entiendo por que no aparece si con los botones del nav si lo hace.
Os paso los codigos a ver si alguien ve lo que a mi se me escapa.
codigo HTML:
Código:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner" id="cabezara">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active" ><a>Home</a></li>
<li ><a>About</a></li>
<li ><a>Artwork</a></li>
<li ><a>Expos</a></li>
<li ><a>Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit" id="home">
<h1>Marcos Izquierdo</h1>
<div id="wrapper" class="span10">
<div id="colum_left" class="span5">
<div class="botonesindex" ><p>Bio</p></div>
<div class="botonesindex"><p>Artwork</p></div>
</div>
<div id="colum-right" class="span5">
<div class="botonesindex" ><p>Expos</p></div>
<div class="botonesindex" ><p>Contactos</p></div>
</div>
</div>
</div>
<!-- Example row of columns -->
<section id="about">
<div class="row">
<div class="span10">
<header>About</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.
</p>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="span10">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.
</p>
</div>
</div>
</section>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
</script>
</body>
</html>
codigo Jquery:
Código:
var arraysection = new Array();
arraysection[0] = "#home";
arraysection[1] = "#about";
arraysection[2] = "#artwork";
arraysection[3] = "#expos";
arraysection[4] = "#contact";
$(document).ready(function() {
$('ul.nav li,div#wrapper p').click(function() {
var section = "#" + $(this).text().toLowerCase();
alert(section);
if (!$(section).is(':visible')) {
for (i = 0; i < arraysection.length; i++) {
if (arraysection[i] !== section) {
$(arraysection[i]).fadeOut(500);
}
}
$(section).fadeIn(2000);
}
});
});
el css tengo el div ocultos con Display:none
Gracias de antemano.
Saludos