Hola compañeros, resulta que estoy teniendo un problema para "mostrar y ocultar" divs.
Voy creando un menu (ul -> li -> a) y en el atributo href del enlace almaceno un texto con la forma #tab(+ id del producto), o sea, me quedan con la forma:
#tab-1
#tab-2
#tab-n
Aclarar que las id del producto las traigo con php de una base de datos.
Luego creo los mismos textos y los voy pasando como id a una serie de divs
Aquí el código:
Código HTML:
Ver original <?php
$grupos = getGrupos($producto["idproductos"]);
foreach ($grupos as $grupo):
?>
<li class="sm_item"><a href="#tab-<?php echo $grupo['idgrupos']; ?>">
<?php echo $grupo['nombre']?></a></li> <?php
endforeach;
?>
<div id="wrapSubmenuContenido"> <?php
$grupos = getGrupos($producto["idproductos"]);
foreach ($grupos as $grupo):
?>
<div id="#tab-<?php echo $grupo['idgrupos']; ?>" class="items_submenu">
<?php
$caracteristicas = getCaracteristicasPorGrupo($grupo['idgrupos']); //var_dump($caracteristicas);
foreach ($caracteristicas as $fila):
//$idgrupo = $fila["grupos_idgrupos"];
//$grupo = getGrupo($idgrupo);
$imagen = getImagenes($fila["file_manager_idfile_manager"]);
?>
<div class="float_contenido_submenu"> <img src="back/files/images/large/<?php echo $imagen[0]["src"];?>" width="316px" height="190px"/>
<p><?php echo $fila["description"]; ?></p> <?php
endforeach;
?>
<?php
endforeach;
?>
Luego abajo nomás escribo código javascript (jquery) en donde según el item del menú que clickee identifico el div y lo oculto. Acá el problema, esto no funciona.
en la variable activeTab busco el tributo href del enlace del item de menu que hago click. ya que es igual al id del div que deseo eliminar
activeTab = $(this).find("a").attr("href");
activeTab almacena perfectamente el texto (ejemplo "#tab-17") pero cuando hago
$(activeTab).hide() no elimina el div, no se porque no me hace caso.
Aquí el código:
Código Javascript
:
Ver original<script type="text/javascript">
$(document).ready(function(){
$(".items_submenu").hide();
$("#submenu li:first").addClass("submenu_active");
$(".items_submenu:first").show();
$("#submenu li").live('click', function(){
$("#submenu li").removeClass("submenu_active");
$(this).addClass("submenu_active");
//$(".items_submenu").hide();
var activeTab = $(this).find("a").attr("href");
alert(activeTab);
$(activeTab).hide()
//return false;
});
});
</script>
Desde ya muy agradecido por su ayuda, cualquier link o sugerencia es bienvenida.
Saludos.
EDITO: ACÁ LO PUEDEN VER MÁS CLARO
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> /*#submenu .sm_item a*/
.submenu_active{
font-weight:bold;
}
#wrapSubmenuContenido{
background:red;
width:100%;
position:relative;
}
/*#tab-N*/ .items_submenu {
overflow:hidden;
background:green;
margin-bottom:10px;
}
.float_contenido_submenu{
width:320px;
height:250px;
float:left;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){
$(".items_submenu").hide(); //Hide all content
$("#submenu li:first").addClass("submenu_active");
$(".items_submenu:first").show(); //Show first tab content
$("#submenu li").live('click', function(){
$("#submenu li").removeClass("submenu_active"); //Remove any "active" class
$(this).addClass("submenu_active"); //Add "active" class to selected tab
$(".items_submenu").hide(); //Hide all tab content
activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).show(); //Fade in the active ID content
//return false;
});
});
<li class="sm_item"><a href="#tab1">uno
</a></li> <li class="sm_item"><a href="#tab2">dos
</a></li> <div id="wrapSubmenuContenido"> <div id="#tab1" class="items_submenu"> <div class="float_contenido_submenu"> <div id="#tab2" class="items_submenu"> <div class="float_contenido_submenu">