Foros del Web » Creando para Internet » CSS »

Menu con pestañas

Estas en el tema de Menu con pestañas en el foro de CSS en Foros del Web. Hola, he intentando instalas un menu con pestañas en mi pagina web pero no me ha funcionado, solo me muestra las parte grafica de las ...
  #1 (permalink)  
Antiguo 21/12/2011, 17:23
 
Fecha de Ingreso: diciembre-2011
Mensajes: 19
Antigüedad: 10 años
Puntos: 0
Menu con pestañas

Hola,

he intentando instalas un menu con pestañas en mi pagina web pero no me ha funcionado, solo me muestra las parte grafica de las pestañas pero no funciona , espero que puedan ayudarme, Saludos y desde ya gracias!

Les dejo el archivo completo : http://www.developnew.com/resources/tab.zip

esta es mi pagina, en la parte que dice descripcion, alli estan las pestañas:
http://www.ventech.com.ar/catalog/catalog/product_info.php?products_id=65


les dejo parte del código de la pagina donde lo quise instalar:

?php
/*
$Id: product_info.php,v 1.97 2003/07/01 14:34:54 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/

require('includes/application_top.php');

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

$product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
$product_check = tep_db_fetch_array($product_check_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location =no,directories=no,status=no,menubar=no,scrollbars =no,resizable=yes,copyhistory=no,width=100,height= 100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<style type="text/css">
TD.norepeat{background-image:url(/fonodo.png); background-repeat:no-repeat;}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<script language="javascript">
function ocultarTodo() {
indicadores = document.getElementById("cabecera").getElementsByT agName("div");
for (var i = 0; i < indicadores.length; i ++)
indicadores[i].style.display = "none";

}
</script>



Código PHP:
Ver original
  1. <script type="text/javascript" src="jquery.js"></script>
  2. <style type="text/css">
  3. body {font-family:Verdana, Arial, Helvetica, sans-serif;}
  4. .tab-box {
  5.   border-bottom: 1px solid #DDD;
  6.  padding-bottom:5px;
  7. }
  8. .tab-box a {
  9.   border:1px solid #DDD;
  10.  color:#666666;
  11.  padding: 5px 15px;
  12.   text-decoration:none;
  13.   background-color: #eee;
  14. }
  15. .tab-box a.activeLink {
  16.   background-color: #fff;
  17.  border-bottom: 0;
  18.   padding: 6px 15px;
  19. }
  20. .tabcontent { border: 1px solid #ddd; border-top: 0; padding: 5px;}
  21. .hide { display: none;}
  22.  
  23. .small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Verdana, Arial, Helvetica, sans-serif; }
  24. </style>
  25.  
  26. <script type="text/javascript">
  27.   $(document).ready(function() {
  28.     $(".tabLink").each(function(){
  29.       $(this).click(function(){
  30.         tabeId = $(this).attr('id');
  31.         $(".tabLink").removeClass("activeLink");
  32.         $(this).addClass("activeLink");
  33.         $(".tabcontent").addClass("hide");
  34.         $("#"+tabeId+"-1").removeClass("hide")  
  35.         return false;    
  36.       });
  37.     });  
  38.   });
  39. </script>


</head>

y el body:


<td width="500px" valign="top" colspan="2" style="border:solid 0px #CCCCCC; ">
<div class="tab-box">
<a href="javascript:;" class="tabLink activeLink" id="cont-1">Descripción</a>
<a href="javascript:;" class="tabLink " id="cont-2">Pago y envío</a>
</div>

<div class="tabcontent" id="cont-1-1">
<?php echo stripslashes($product_info['products_description']); ?>
</div>

<div class="tabcontent hide" id="cont-2-1">
Proximamente
</div>
</td>


GRACIAS!

Última edición por diblasifrancisco; 21/12/2011 a las 17:56

Etiquetas: pestañas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:19.