0

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: Imagen de los divs que fungen como botón

$('#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.

7
  • @VictorHerasmePerez, creo que comprendiste mal o no me explique de la mejor manera... editaré mi código intentando ser más explicito.
    – Roger
    el 21 feb. 2018 a las 5:37
  • @VictorHerasmePerez Ya he modificado la pregunta, lo que me dices es correcto, y también lo llegaré a necesitar, pero lo que yo quiero es ocultar y/o mostrar los contenedores con los datos de cada apartado.
    – Roger
    el 21 feb. 2018 a las 5:46
  • @VictorHerasmePerez, he checado tu respuesta, lo he implementado y al parecer todo debería de funcionar bien, ya que identity tiene el valor de Data-related y theId tiene el ID, y estos deberían ser igual para poder mostrarse.. no me hacía nada de principio y simplemente le puse un alert para verificar si entraba, y efectivamente, entra pero no hace lo que en teória debería.
    – Roger
    el 21 feb. 2018 a las 15:17
  • @VictorHerasmePerez, modificaré la pregunta colocando todo el HTML, que en realidad es justamente eso, pero lo haré.
    – Roger
    el 21 feb. 2018 a las 15:23
  • @VictorHerasmePerez, ya lo tengo dentro del snipet, lo debugie y me di cuenta que de alguna forma no me encuentra los id's.
    – Roger
    el 21 feb. 2018 a las 15:46

1 respuesta 1

0

Vale, esta es la edición final. Espero que funcione bien. Lo he probado por si acaso

    $('.content').click(function(){
      
        var identity = $(this).attr('data-related');
        alert("Identity: " + identity);
        $('#main-content').find('.container').each(function(){
            var theId = $(this).attr('id');
            if(theId === identity){
                $(this).show();
                alert("Id: " + theId);
            } else {
                $(this).hide();
            }
        });
    });

$('.content').click(function(){
        alert('Si entre');
        var identity = $(this).attr('data-related');
        console.log("Identity: " + identity);
        $('#main-content').find('.container').each(function(){
            var theId = $(this).attr('id');            
            if(theId === identity){
                $(this).show();
                console.log("Id: " + theId)
            } 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" data-related="load_home">
                   <i>
                    <img class="icon" src="/static/images/home.png" alt="">   
                   </i>
                <p class="text-center texto"> Home </p>
            </div>
            
            <div class="content" id="Register" data-related="load_request">
                <i>
                  <img class="icon" src="/static/images/register.png" alt="">  
                </i>  
                <p class="text-center texto"> Register </p>
            </div>
            
            <div class="content" id="Tabs" data-related="load_issues">
               <i>
                <img class="icon" src="/static/images/tabs.png" alt="" >  
               </i>   
                <p class="text-center texto"> Tabs </p>
            </div>
            
            <div class="content" id="Reports" data-related="load_reports">
               <i>
                <img class="icon" src="/static/images/graphics.png" alt="" >   
               </i> 
                <p class="text-center texto"> Reports </p>
            </div>
            
            <div class="content" id="Settings" data-related="load_settings">
                <i>
                <img class="icon" src="/static/images/settings.png" alt="" >    
                </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>

3
  • Es recomendable que añadas la descripción a tu respuesta. el 21 feb. 2018 a las 16:30
  • Perfecto victor, esta respuesta es totalmente funcional, muchisimas gracias por tu tiempo!.
    – Roger
    el 21 feb. 2018 a las 20:12
  • De nada. Sólo falta que la aceptes :-) el 21 feb. 2018 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.