- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Tab Demo</title>
- <script type="text/javascript" src1="jquery-1.7.1.min.js"></script>
- <script type="text/javascript">
- <!--
- jQuery(function($){
- var $li = $('.tabbox>ul>li,.tabbox2>ul>li');
- var $div = $('.tabbox').children('div.tabtext');
- $li.children('a').click(function(e){
- e.stopPropagation();
- e.preventDefault();
- });
- $li.mouseover(function(e){
- $(this).parent().children('li').removeClass('hover');
- $(this).addClass('hover');
- var ref = $(this).children('a').attr('href');
- if(ref!=undefined && ref!=''){
- $(ref).parent().children('div.tabtext').hide();
- $(ref).show();
- }
- });
- });
- //-->
- </script>
- <style type="text/CSS">
- * { margin:0;padding:0;}
- html,body { font-size:14px;color:#333;background:#FFF;}
- .tabbox { width:680px;height:200px;margin:20px auto;border:1px #DDD solid;padding:10px;}
- .tabbox ul { list-style-type:none;clear:both;float:none;position:relative;z-index:20;width:100%;margin-left:5px;}
- .tabbox ul li { display:block;float:left;height:26px;line-height:26px;padding:0 15px;position:relative;z-index:21;top:1px;}
- .tabbox ul li a { text-decoration:none;}
- .tabbox ul li.hover { border:1px #999 solid;border-bottom:1px #FFF solid;}
- .tabbox .tabtext { display:none;clear:both;float:none;position:relative;z-index:15;border:1px #999 solid;padding:8px;}
- .tabbox2 { width:680px;height:auto;margin:20px auto;border:1px #DDD solid;padding:10px;overflow:hidden;zoom:1;}
- .tabbox2 ul { list-style-type:none;width:70px;float:left;position:relative;z-index:20;margin-top:8px;}
- .tabbox2 ul li { display:block;float:none;clear:both;height:26px;line-height:26px;padding:0 15px;position:relative;z-index:21;left:1px;}
- .tabbox2 ul li a { text-decoration:none;}
- .tabbox2 ul li.hover { border:1px #999 solid;border-right:1px #FFF solid;}
- .tabbox2 .tabtext { display:none;width:480px;height:200px;float:left;position:relative;z-index:15;border:1px #999 solid;padding:8px;}
- </style>
- </head>
- <body>
- <div class="tabbox2">
- <ul>
- <li><a href="#d1">选项1</a></li>
- <li class="hover"><a href="#d2">选项2</a></li>
- <li><a href="#d3">选项3</a></li>
- </ul>
- <div id="d1" class="tabtext">
- 内容1
- </div>
- <div id="d2" class="tabtext" style="display:block;">
- 内容2
- </div>
- <div id="d3" class="tabtext">
- 内容3
- </div>
- </div>
- <div class="tabbox">
- <ul>
- <li><a href="#d4">选项1</a></li>
- <li class="hover"><a href="#d5">选项2</a></li>
- <li><a href="#d6">选项3</a></li>
- </ul>
- <div id="d4" class="tabtext">
- 内容1
- </div>
- <div id="d5" class="tabtext" style="display:block;">
- 内容2
- </div>
- <div id="d6" class="tabtext">
- 内容3
- </div>
- </div>
- <div class="tabbox">
- <ul>
- <li><a href="#d4">选项1</a></li>
- <li class="hover"><a href="#d5">选项2</a></li>
- <li><a href="#d6">选项3</a></li>
- </ul>
- <div id="d4" class="tabtext">
- 内容1
- </div>
- <div id="d5" class="tabtext" style="display:block;">
- 内容2
- </div>
- <div id="d6" class="tabtext">
- 内容3
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/030620133725.html
来源: http://www.codesnippet.cn/detail/030620133725.html