Jquery tab

最新推荐文章于 2024-11-02 12:42:04 发布

qinliang760

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量230

点赞数

分类专栏： Jquery Tools 文章标签： jquery javascript html class xhtml url

本文链接：https://blog.csdn.net/qinliang760/article/details/5359004

版权

Jquery Tools 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="content-script-type" content="text/javascript"/> <title>jquery_test</title> <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet"/> <mce:script language="javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script language="javascript" src="js/tools.tabs-1.0.4.js" mce_src="js/tools.tabs-1.0.4.js" type="text/javascript"></mce:script> </head> <body> <div class="con"> <ul class="tabs ClearFix"> <li><a href="#" mce_href="#">Tab 1</a></li> <li><a href="#" mce_href="#">Tab 2</a></li> <li><a href="#" mce_href="#">Tab 3</a></li> </ul>  <div class="panes"> <div>First tab content</div> <div>Second tab content</div> <div>Third tab content</div> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ *,html,body{ margin:0; padding:0; } div.con{ width:500px; margin:30px auto; } ul.tabs li{ list-style-type:none; float:left; margin:0 6px; display:inline; } ul.tabs li a{ width:95px; background:#EEEDEA url(../images/tab.gif) no-repeat 0 0; height:32px; overflow:hidden; text-align:center; line-height:32px; text-decoration:none; display:block; font-size:12px; } ul.tabs li a:hover{ background:#EEEDEA url(../images/tab_on.gif) no-repeat 0 0; } ul.tabs li a.current{ background:#EEEDEA url(../images/tab_on.gif) no-repeat 0 0; } div.panes{ background:#EEEDEA; border:1px #d5d9df solid; margin-left:6px; margin-top:-2px; } .ClearFix:after{ display: block; clear: both; height: 0; visibility: hidden; content: "."; } .ClearFix{ display: inline-block; } /* Hides from IE 4-6 /*/ * html .ClearFix, * html{ height: 1%; } .ClearFix{ display: block; } $(function() { $("ul.tabs").tabs("div.panes > div"); });