- <!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" src1="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 src1="http://www.w3school.com.cn" width="770px" height="580px" scrolling="yes" ></iframe></div>
- <div class="hide"><iframe src1="http://www.w3cschool.cc" width="770px" height="580px"></iframe></div>
- <div class="hide"><iframe src1="http://www.lampweb.org/jquerymobile" width="770px" height="580px"></iframe></div>
- </div>
- </div>
- <div id="description">
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1501201511549.html
来源: http://www.codesnippet.cn/detail/1501201511549.html