继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery网页选项卡

关注TA
已关注
手记
粉丝
获赞

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>     <head>         <meta http-equiv="content-type" content="text/html;charset=utf-8"/>         <meta name="keywords" content="关键词1,关键词2,关键词3等等"/>         <title>网页选项卡</title>         <style type="text/css">             body,ul,li{margin:0; padding:0; list-style:none;}             .wrap{width:300px; height:200px; margin:10px auto; border:1px solid #000; padding:10px;}             .tab_menu{clear:both; margin-top:10px;}             .tab_box{clear:both;}             ul li{float:left; width:60px; height:30px; line-height:30px; text-align:center; margin-right:10px; pink;} < /span>            .selected{background:#999;}             .tab_box div{height:150px; border:1px solid #f00;}             .hid{display:none;}             .hover{background:#f00;}         </style>         <script type="text/javascript" src="jquery-1.7.2.min.js"></script>         <script type="text/javascript">             $(function(){                 var $div_li=$("div.tab_menu ul li");                 $div_li.click(function(){                     $(this).addClass("selected")                            .siblings().removeClass("selected");                     var index=$div_li.index(this);//获取当前单击的li在全部li中的索引                     $("div.tab_box>div")                            .eq(index).show()   //显示li元素对应的div元素                            .siblings().hide();                 }).hover(function(){//添加鼠标划入划出效果                     $(this).addClass("hover");                 },function(){                     $(this).removeClass("hover");                 })             })         </script>     </head>     <body>         <div class="wrap">             <div class="tab_menu">                 <ul>                     <li class="selected">时事</li>                     <li>体育</li>                     <li>娱乐</li>                 </ul>             </div>             <div class="tab_box">                 <div>时事</div>                 <div class="hid">体育</div>                 <div class="hid">娱乐</div>             </div>         </div>     </body> </html>

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP