温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery简单tab效果

发布时间:2020-05-31 13:01:41 阅读:664 作者:houguang 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <link href="p_w_picpaths/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="p_w_picpaths/jquery.js"></script> </head>  <body> <div id="main">     <div id="left">         <ul>           <li class="liLight"><a href="#">公司简介</a></li>           <li><a href="#">领导致辞</a></li>           <li><a href="#">工艺传承</a></li>           <li><a href="#">限量概念</a></li>         </ul>     </div><!--left over-->     <div id="right">         <div class="box" style="display:block;">11111111111</div>         <div class="box">22222222222</div>         <div class="box">3333333333</div>         <div class="box">44444444444</div>     </div><!--right over--> <script> function showTab(i){      $("#left ul li: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><!--main over--> </body> </html> 
/* CSS Document houguang*/ body,ul,li,span,p,strong,div,form,lable,input { margin:0padding:0border:none;} body { background:url(bg1.jpg) center top no-repeat; font-size:12pxfont-family:"宋体"text-align:center; height:700px;} ul { list-style:none;}  #main { width:960pxheight:330pxmargin:0 auto; margin-top:165pxtext-align:leftposition:relative;} #title { width:190pxheight:70pxposition:absolute; top:0left:0color:#ad0000font-size:24pxfont-weight:bold; text-align:center;} #title span { color:#753b17font-size:14pxfont-weight:normal; line-height:3em;} #left { width:190pxheight:auto; float:leftmargin-top:70px;} #left ul li { width:190pxheight:35pxline-height:35pxtext-align:center;} #left ul li ul { display:none;} #left ul li ul li { padding-left:5pxheight:20pxline-height:20px;} #left ul li ul li a { color:#834a37;} #left ul li ul .liLight0 { background:url(list.gif) left no-repeat; color:#834a37;} #left ul li ul .liLight0 a { color:#834a37font-weight:bold;} #left ul li a { color:#753b17text-decoration:none;} #left ul .liLight { background:url(light_bg.jpg) top center no-repeat;} #left ul .liLight a { color:#FFF;} #right { width:760pxheight:260pxfloat:leftposition:relative;} #right .box { width:740pxheight:220pxoverflow:auto; position:absolute; top:30pxdisplay:none;}  #footerwidth:1000pxheight:40pxmargin:0 auto; margin-top:130pxposition:relative;} #footer ul li { float:left;} #footer ul li a { padding:5px 25pxtext-decoration:none; font-family:"黑体"font-size:14pxfont-weight:bold; color:#000line-height:30px;} #footer ul li a:hover { color:#FFF;} #footer ul .liLight1 { background:url(nav_bg.gif) center no-repeat;} #footer ul .liLight1 a { color:#FFF;}  #copy { width:960pxcolor:#b79e6ffont-size:12pxtext-align:leftmargin:10px auto;} 

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×