Mostrar Contenido de Tabla dependiendo del link

HackID1 · #1 (**permalink**) 01/06/2015, 07:27

Que tal foreros.

Bueno tengo una pregunta se que es básica, pero aún no consigo la solución esperada, ya lo he realizado en Ajax, pero ahora necesito lo mismo en JQuery sin conexión al Servidor.

El código ORIGINAL AQUI:
codigo_menuJquery

Tengo un menu de botones y necesito que al dar a "menu1" muestre una tabla.. al dar clic a "menu2" muestre otros datos, al dar clic en "menu3" muestre la tabla 3 con otros datos y así para los 4 botones del menu.

He intentado con este código de ejemplo pero no consigo ponerlo a funcionar.

NOTA: He puesto en el head la etiqueta de Jquery

Código HTML:

Ver original<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Pero no se si es la correcta para el funcionamiento del script, en la carpeta JS esta el script que ahí referencio.

Si pueden ayudarme a finalizar este ejemplo lo agradezco, donde pone texto1, texto2, texto3 en cada uno irá una tabla con datos, pero eso ya lo cambio, lo que requiero ayuda es el funcionamiento en un comienzo.

Dejo el código hasta ahora (Sin funcionar aún en localhost, aunque en codepen si funciona).

Código HTML:

Ver original<html>
 
<head>
    <style>
    
        body {
            background-color: red;
        }
        
        .marco_volver_home{
            width: 80px;
            float: left;
            display: inline;
            height: 35px;
        }
 
        .marco_volver_home a{
            color: #FFF;
            text-decoration: none;
            position: relative;
            float: left;
            line-height: 35px;
        }
 
        .marco_volver_home a:hover{
            color: #F00;
        }
 
        .marco_volver_home img{
            width: 25px;
            height: 25px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
            margin-top: 5px;
            margin-left: 5px;
            float: left;
            margin-right: 5px;
        }
 
        .menu_superior {
            margin-left: 240px;
            width: 710px;
            background-color: #CCC;
            position: absolute;
            top: 65px;
            border-radius: 5px 5px 5px 5px;
        }
 
        #unidad_1_nav,#nav ul {
            list-style: none outside none;
            margin: 0;
            padding: 0;
        }
 
        #unidad_1_nav {
            background-color: transparent;
            border-radius: 5px 5px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
            display: table;
            position: relative;
            z-index: 9999;
            width: 710px;
        }
 
        #unidad_1_nav ul {
            background-color: #999;
            padding-top: 5px;
            padding-right: 0;
            padding-bottom: 10px;
            padding-left: 0;
            margin-top: 4px;
            border-radius: 0 0px 5px 5px;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
            position: absolute;
            overflow: hidden;
            left: -9999px;
            top: -9999px;
        }
 
        #unidad_1_nav li {
            float: left;
            position: relative;
        }
 
        #unidad_1_nav li a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1em;
            text-decoration: none;
            color: #000;
            display: block;
            padding-top: 7px;
            padding-right: 10px;
            padding-bottom: 7px;
            padding-left: 10px;
        }
 
        #unidad_1_nav li:hover a {
            color: #FFF;
            background-color: #999;
        }
 
        #unidad_1_nav li:hover ul.subs {
            left: 0;
            top: 29px;
            width: 180px;
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -o-transform: scaleY(1);
            -webkit-transform: scaleY(1);
        }
 
        #unidad_1_nav ul li {
            width: 100%;
        }
 
        #unidad_1_nav ul li:hover > a {
            background-color: #666 !important;
        }
 
 
 
 
        /* PESTANAS */
 
        ul.tabs{
            height:30px;
            width:100%;
            margin:0;
            padding:0;
            list-style:none
            }
            
        .tabs li{
            float:left;
            }
            
        .tabs li.selected{
            background-color: #999;
            border-right-width: 1px;
            border-bottom-width: 0;
            border-left-width: 1px;
            }
                    
        .tabs li a:link,.tabs li a:active,.tabs li a:visited,.tabs li a:hover{
            font-size:1.1em;
            text-decoration:none;
            display:block;
            color:#000;
            padding:0 30px;
            }
            
        .tabs li.selected a:link,.tabs li.selected a:active,.tabs li.selected a:visited,.tabs li.selected a:hover{
            font-weight:bold;
            }
                    
        div.pestana{
            background-color: #FFF;
            width: 700px;
            height: 450px;
            margin-top: 120px;
            margin-left: 245px;
            }
            
        .pestana p{
            font-size:1em;
            color: #000;
            font-family: Arial, Helvetica, sans-serif;
            text-align: justify;
            padding: 10px;
            }
    </style>
    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 
    <script>
        $(document).ready(function() {
        $('.pestana').hide().eq(0).show();
        $('.tabs li').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $('.pestana').hide();
        $('.tabs li').removeClass("selected");
        var id = $(this).find("a").attr("href");
        $(id).fadeToggle();
        $(this).addClass("selected");
        });
        });
    </script>
    
</head>
 
<body>
 
<section class="menu_superior">
        
    <ul class="tabs" id="unidad_1_nav">
    
    <li class="selected"><a href="#tab-1">menu 1</a></li>
    <li><a href="#tab-2">menu 2</a></li>       
    <li><a href="#tab-3">menu 3</a></li>
                
    <li><a href="#tab-4">menu 4</a></li>      
    </ul> 
    </section>
  
    <div class="pestana" id="tab-1">
    <h2>Pestaña 1</h2>
    <p>texto 1...</p>
    </div>
    
    <div class="pestana" id="tab-2">
    <h2>Pestaña 2</h2>
    <p>texto 2...</p>
    
    <input id="click" type="button" value="Refrescar"/>
    
    </div>
    
    <div class="pestana" id="tab-3">
    <h2>Pestaña 3</h2>
    <p>texto 3...</p>
    </div>
    
    <div class="pestana" id="tab-4">
    <h2>Pestaña 4</h2>
    <p>texto 4...</p>
    </div>
    
</body>
 
</html>

Gracias.