jQuery简单tab效果

2025-02-14 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><linkhref="p_w_picpaths/style.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="p_w_picpaths/jquery.js"></script></head><body><divid="main"><divid="left"><ul><liclass="liLight"><ahref="#">公司简介</a></li><li><ahref="#">领导致辞</a></li><li><ahref="#">工艺传承</a></li><li><ahref="#">限量概念</a></li></ul></div><divid="right"><divclass="box"style="display:block;">11111111111</div><divclass="box">22222222222</div><divclass="box">3333333333</div><divclass="box">44444444444</div></div><script>functionshowTab(i){$("#leftulli:eq("+i+")").click(function(){$(this).addClass("liLight").siblings().removeClass("liLight");$("#right.box:eq("+i+")").show().siblings().hide();})}for(i=0;i<4;i++){showTab(i);}</script></div></body></html>

/*CSSDocumenthouguang*/body,ul,li,span,p,strong,div,form,lable,input{margin:0;padding:0;border:none;}body{background:url(bg1.jpg)centertopno-repeat;font-size:12px;font-family:"宋体";text-align:center;height:700px;}ul{list-style:none;}#main{width:960px;height:330px;margin:0auto;margin-top:165px;text-align:left;position:relative;}#title{width:190px;height:70px;position:absolute;top:0;left:0;color:#ad0000;font-size:24px;font-weight:bold;text-align:center;}#titlespan{color:#753b17;font-size:14px;font-weight:normal;line-height:3em;}#left{width:190px;height:auto;float:left;margin-top:70px;}#leftulli{width:190px;height:35px;line-height:35px;text-align:center;}#leftulliul{display:none;}#leftulliulli{padding-left:5px;height:20px;line-height:20px;}#leftulliullia{color:#834a37;}#leftulliul.liLight0{background:url(list.gif)leftno-repeat;color:#834a37;}#leftulliul.liLight0a{color:#834a37;font-weight:bold;}#leftullia{color:#753b17;text-decoration:none;}#leftul.liLight{background:url(light_bg.jpg)topcenterno-repeat;}#leftul.liLighta{color:#FFF;}#right{width:760px;height:260px;float:left;position:relative;}#right.box{width:740px;height:220px;overflow:auto;position:absolute;top:30px;display:none;}#footer{width:1000px;height:40px;margin:0auto;margin-top:130px;position:relative;}#footerulli{float:left;}#footerullia{padding:5px25px;text-decoration:none;font-family:"黑体";font-size:14px;font-weight:bold;color:#000;line-height:30px;}#footerullia:hover{color:#FFF;}#footerul.liLight1{background:url(nav_bg.gif)centerno-repeat;}#footerul.liLight1a{color:#FFF;}#copy{width:960px;color:#b79e6f;font-size:12px;text-align:left;margin:10pxauto;}