下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML> <html> <head> <title>jQuery</title> <style type="text/css"> *{ margin:0 auto; padding:0; list-style-type:none;} #tab{ width:800px; position:relative; margin:40px auto;} #tab .tab_menu{ width:100%; float:left; position:absolute; z-index:1; } #tab .tab_menu li{ float:left; width:262px; height:30px; line-height:30px; border:1px solid #ccc; bottom:0px; cursor:pointer; text-align:center; margin:0 2px 0 0; } #tab .tab_box{ width:794px; height:600px; clear:both; top:30px; position:relative; border:1px solid #CCC; background:green; } #tab .tab_menu .selected{ background-color:#DDDDFF; cursor:pointer; } .hide{ display:none; } .tab_box div{ padding:10px; } #tab_menu li a{ text-style:none; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $tab_li = $('#tab ul li'); $tab_li.hover(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var index = $tab_li.index(this); $('div.tab_box > div').eq(index).show().siblings().hide(); }); }); </script> </head> <body> <div id="tab"> <ul class="tab_menu"> <li class="selected">w3school</li> <li>w3cschool</li> <li>jquety mobile</li> </ul> <div class="tab_box"> <div><iframe src="http://www.w3school.com.cn" width="770px" height="580px" scrolling="yes" ></iframe></div> <div class="hide"><iframe src="http://www.w3cschool.cc" width="770px" height="580px"></iframe></div> <div class="hide"><iframe src="http://www.lampweb.org/jquerymobile" width="770px" height="580px"></iframe></div> </div> </div> <div id="description"> </div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。