<!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> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <style type="text/css"> .minTab { overflow:hidden; height:50px; } .minTab ul { _overflow:hidden; width:100%; padding:0 6px; height:27px; line-height:27px; position:relative; border:solid #cfcfcf 1px; border-left:none; border-right:none; white-space:nowrap; background-color: #fbfbfb; list-style-type:none; background-image: -moz-linear-gradient(top, #fbfbfb, #eff0f1); /* FF3.6 */ background-image: -ms-linear-gradient(top, #fbfbfb, #eff0f1); /* IE10 */ background-image: -o-linear-gradient(top, #fbfbfb, #eff0f1); /* Opera 11.10+ */ background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#eff0f1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #fbfbfb, #eff0f1); /* Chrome 10+, Saf5.1+ */ background-image: linear-gradient(top, #fbfbfb, #eff0f1); filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#fbfbfb', EndColorStr='#eff0f1'); /* IE6–IE9 */ } .minTab ul li { float:left; padding:0 16px; position:relative; height:28px; line-height:27px; cursor:pointer; } .minTab ul li.active { border-right:solid #cfcfcf 1px; border-left:solid #cfcfcf 1px; background-color:#fff; padding:0 12px; height:28px; font-weight:bold; _margin-bottom:-1px; } /*第二种*/ .Tab-top ul, .Tab-top ul li,Tab-top ul li.active, .Tab-top ul li span { background-image:url('http://hi.csdn.net/attachment/201107/5/0_1309842250iy2Q.gif'); } .Tab-top{ height:30px; font-size:14px; line-height:1; } .Tab-top ul { padding:0 6px; height:30px; background- position:bottom;list-style-type:none; } .Tab-top ul li{ float:left; cursor:pointer; padding-left:11px; margin:0 2px 0 1px; height:30px; background-position:0 -60px; } .Tab-top ul li.active{ background-position:0 0; } .Tab-top ul li span { line-height:30px; height:30px; display:inline-block; padding:0 11px 0 5px; white-space:nowrap; background-position: right -90px; } .Tab-top ul li.active span{ padding:0 7px 0 3px; background- position:right -30px; font-weight:bold; } </style> <script type="text/javascript" language="javascript"> $(".minTab,.Tab-top").live("click", function(event) { var $target = $(event.target); var $this = $(this); if ($target.is("li")) { $this.find("li").removeClass("active"); $target.addClass("active"); } else if ($target.is("li span")) { $this.find("li").removeClass("active"); $target.parent("li").addClass("active"); } }); </script> </head> <body> <form id="form1" > <div> <div class="minTab" style=""> <ul> <li id="lidivTJ" class="active" style="cursor: hand" οnclick="return false;"> <span>你好</span></li> <li id="lidivQuanb" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="lidivRij" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="lidivLiuc" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="lidivRenw" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="lidivJih" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="lidivKaoq" style="cursor: hand;" οnclick="return false;"><span> 你好</span></li> </ul> </div> <br /> <div class="Tab-top" style=""> <ul> <li id="li1" class="active" style="cursor: hand" οnclick="return false;"> <span>你好</span></li> <li id="li2" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="li3" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="li4" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="li5" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="li6" style="cursor: hand" οnclick="return false;"><span> 你好</span></li> <li id="li7" style="cursor: hand;" οnclick="return false;"><span> 你好</span></li> </ul> </div> </div> </form> </body> </html>
样式2 图片:http://hi.csdn.net/attachment/201107/5/0_1309842250iy2Q.gif
div 实现 tab 页
最新推荐文章于 2024-04-22 07:30:40 发布