Solicite el código HTML JS DIV. "Servir" y "servir" son efectos del mouse
Entre ellos, el archivo de la biblioteca jQuery debe descargarlo e importarlo usted mismo; usted mismo diseña el contenido en el conmutador, yo solo hago los efectos.
<! tipo de documento? html & gt
& lthtml & gt
& lthead & gt
& ltmeta? charset="utf-8 " >>p>
& lttitle & gtDocumento sin título
& lt/head & gt;
& ltScript? src="jquery.min.js"? type = " texto/JavaScript "></script>
<script>
$(function(){
$ ('#clicktab?.tabBtn?李).mouseover(function(){
TabSelect("#clicktab?.tabBtn?",,李?" #clicktab?.tabCon ","active", ? $(this)) p>
$('#clicktab?.tabBtn?李 Ecuación(0)
TabSelect(tab,con,addClass,obj){
var?=. ?obj
var?=?$ (pestaña);
$_nav.removeClass(addClass),
$_self.addClass(addClass); p>
var?=?$ _nav.index($_self);
var? $_con? =?$(con);
$_con.hide() ,
$_con.eq($_index).show();
}
});
& lt/script & gt;
& ltstyle & gt
*{?Margin:0;? padding:0;}
# haga clic en la pestaña { ancho:400 px;? Altura: 500 px? Margen:50px? Automático;}
. Menú { ancho: 400 px; }
. tabBtn? li { ancho: 198 px; alto: 26 px alto de línea: 26 px alineación del texto: centro; flotante: izquierda; estilo de lista: ninguno; ¿sólido? #ddd}
. tabBtn? Li tomó la iniciativa {? Color: #fff? Antecedentes: #09F? Cursor: puntero;}
. claro{? Claro: ambos;}
.
tabCon {ancho:318px;? Borde:1px? ¿sólido? #ddd? borde superior: ninguno;? Alto: 270px? padding:40px}
& lt/style & gt;
& ltbody & gt
& ltdiv? id = " clicktab " & gt
& ltdiv? class="menú "
& ltul? class="tabBtn "
& ltLi? class="active " >Servicio
& lt李& gtService
& ltdiv? class="clear " >& lt/div & gt;
& lt/ul & gt;
& lt/div & gt;
& ltdiv ? class="tabCon " >Contenido correspondiente
& ltdiv? class="tabCon " >Proporcionar el contenido correspondiente
& lt/div & gt;
& lt/body & gt;
& lt/html & gt ;