Bueno aqui tienes Joel Espero que te sirva Consulta con @NickJP por correo o por MP....
Para los demas usuarios pueden comentar y consultar conmigo y tambien poder decir que necesitan para su pagina web... que si esta a mi alcanse los ayudo.!!!
Menu Tres Tabs Tres:
mi puequeño script entre las etiquetas <head></head>
y con este CSS estilo:
y con tan solo agregar entre <body> y </body>
Comenten Por si la dudas
Fuentes: @Js_Toni @NickJP @Foxlyne Group Alpha
Para los demas usuarios pueden comentar y consultar conmigo y tambien poder decir que necesitan para su pagina web... que si esta a mi alcanse los ayudo.!!!
Menu Tres Tabs Tres:
mi puequeño script entre las etiquetas <head></head>
<head>
<script type="text/javascript">
// Creado por Jesus Perez
function tbs(id){
return document.getElementById(id);
} // Ocultar BOX
function tabsen(){ //Oculta cada box
tbs("1").style.display = "none";
tbs("2").style.display = "";
tbs("3").style.display = "";
}
function tabs(id) { // Mostrar BOX
tabsen();
var e = tbs(id);
e.style.display = ( e.style.display == '' ) ? 'block' : '' ;
}
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'current';
prevLink = ele.id;
}
</script>
</head>
y con este CSS estilo:
ul.simpleTabsNavigation {
height: 24px;
line-height: 24px;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.simpleTabsNavigation li {
background-image: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.simpleTabsNavigation li a {
background-color: #1E252D;
border: 2px solid #3E454D;
font-size: 18px;
color: #BBBBBB;
margin: 0 1px 0 0;
padding: 6px 10px;
text-decoration: none;
-moz-border-radius: 8px 8px 0 0;
}
ul.simpleTabsNavigation li a:hover {
background-color: #3E454D;
text-decoration: none;
}
ul.simpleTabsNavigation li a.current {
background-color: #3E454D;
color: #FFFFFF;
}
div.simpleTabsContent {
background-color: #3E454D;
display: none;
font-size: 12px;
margin-top: 1px;
padding: 10px;
-webkit-box-shadow: inset 1px -1px 3px #333, 2px 2px 3px #333;
-moz-box-shadow: inset 1px -1px 2px #333, 2px 2px 3px #333;
}
div.simpleTabsContent2 {
background-color: #3E454D;
display: block;
font-size: 12px;
margin-top: 1px;
padding: 10px;
-webkit-box-shadow: inset 1px -1px 3px #333, 2px 2px 3px #333;
-moz-box-shadow: inset 1px -1px 2px #333, 2px 2px 3px #333;
}
div.simpleTabsContent.currentTab {
display: block;
}
y con tan solo agregar entre <body> y </body>
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" title="Tooltip with left arrow" class="tooltip_link left" id="link1">Actualidad</a></li>
<li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Tutoriales</a></li>
<li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Pestaña 3</a></li>
</ul>
<div class="simpleTabsContent2" id="1">contenido 1</div>
<div class="simpleTabsContent" id="2">contenido 2....</div>
<div class="simpleTabsContent" id="3">contenido 3....</div>
</div>
Comenten Por si la dudas
Fuentes: @Js_Toni @NickJP @Foxlyne Group Alpha