Estoy desarrollando una pequeña aplicación con HTML, y me he topado con un error. Tengo los siguientes div que fungen como botónes:
$('#load').click(function(){
alert('Si entre');
var identity = $(this).attr('data-related');
console.log('soy el identyti ' + identity);
$('#main-content').find('.container').each(function(){
var theId = $(this).attr('id');
console.log(theId)
if(theId === identity){
$(this).show();
} else {
$(this).hide();
}
});
});
/* google fonts*/
/* font to icon containers*/
@import url('https://fonts.googleapis.com/css?family=Anton|Bellefair');
/* google fonts*/
/* site's CSS Class */
* {
margin: 0px;
padding: 0px;
}
.navbar {
height: 50px;
background-color: #FFFFFF;
}
.background{
height: 250px;
background-image: url(/static/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
color: azure;
}
.navbar img {
width: 80px;
height: 30px;
vertical-align: middle;
}
/* header's class*/
header {
width: 1000px;
height: 200px;
background-color: burlywood;
margin: 100px auto;
}
.content {
width: 200px;
height: 200px;
float: left;
color: azure;
-webkit-transition: height .5s;
}
/* add class to divs*/
#Home {background-color: navy;}
#Register {background-color:#210251;}
#Tabs {background-color:firebrick ;}
#Reports {background-color: coral; }
#Settings{ background-color: darkgray;}
#Edit{ background-color:#068083; }
/* icon class, this class is implemented to every containers*/
.icon{
display: block;
margin: 50px auto;
width: 60px;
background-color: rgba(255,255,255,.15);
padding: 10px;
-webkit-border-radius:150px;
-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
-webkit-transition: box-shadow .5s;
}
.texto{
font-family: 'Bellefair', serif;
font-family: 'Anton', sans-serif;
font-size: 1.2em;
opacity: .6;
-webkit-transition: padding-top .5s;
}
.content:hover{
height: 230px;
}
.content:hover p.texto{
padding-top: 30px;
opacity: 1;
}
.content:hover img.icon{
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6)
}
.register{
background-color: cornsilk;
}
#contenedor{
background-color: black;
height: 500px;
color: aliceblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="/static/Jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- FLEX-->
<link rel="stylesheet" href="/static/stylesheets/bootstrap-flex.css">
<!-- profile.html CSS -->
<link rel="stylesheet" href="/static/stylesheets/site_styles.css?201802192337">
<!-- Favicon-->
<link rel="icon" href="/static/images/logo.ico">
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">
<img src="/static/images/logo_ibm.png" alt="">
</a>
</nav>
<!-- Image and text -->
<!-- Backgroun section -->
<div class="container-fluid background d-flex align-items-center">
<h1>Cloud Analytics Reports</h1>
</div>
<!-- Backgroun section -->
<!-- Header content-->
<!-- Contenedpres que sirven como botones -->
<header>
<div class="content" id="Home">
<i>
<img class="icon" src="/static/images/home.png" alt="" data-related="load_home" id="load" >
</i>
<p class="text-center texto"> Home </p>
</div>
<div class="content" id="Register">
<i>
<img class="icon" src="/static/images/register.png" alt="" data-related="load_request" id="load">
</i>
<p class="text-center texto"> Register </p>
</div>
<div class="content" id="Tabs">
<i>
<img class="icon" src="/static/images/tabs.png" alt="" data-related="load_issues" id="load">
</i>
<p class="text-center texto"> Tabs </p>
</div>
<div class="content" id="Reports">
<i>
<img class="icon" src="/static/images/graphics.png" alt="" data-related="load_reports" id="load">
</i>
<p class="text-center texto"> Reports </p>
</div>
<div class="content" id="Settings">
<i>
<img class="icon" src="/static/images/settings.png" alt="" data-related="load_settings" id="load">
</i>
<p class="text-center texto"> Settings </p>
</div>
</header>
<!-- Contenedpres que sirven como botones -->
<!-- Header content-->
<!-- DIVS con el contenido a mostrar según la sección correspondiente -->
<div id="main-content">
<div style="display:none;" class="container" id="load_home">
<h1> Hola, soy el contenido de home</h1>
</div>
<div style="display:none;" class="container" id="load_request">
<h1> Hola, soy el contenido de request</h1>
</div>
<div style="display:none;" class="container" id="load_issues">
<h1> Hola, soy el contenido de issues </h1>
</div>
<div style="display:none;" class="container" id="load_reports">
<h1> Hola, soy el contenido de reports</h1>
</div>
<div style="display:none;" class="container" id="load_settings">
<h1> Hola, soy el contenido de settings</h1>
</div>
</div>
<!-- DIVS con el contenido a mostrar según la sección correspondiente -->
<!-- Script -->
<script src="/static/js/show.js" type="text/javascript"></script>
</body>
</html>
Por Default los DIVs están ocultos con la propiedad display:none; de CSS, lo que busco es que el usuario de clic por ejemplo en HOME, y muestre el contenedor oculto de HOME, y cuando de en algún otro, oculte este y muestre el que se ha clickeado.