maybe0218 发表于 2013-1-4 02:57:30

基于JQuery的多标签的实现

<div id="cnblogs_post_body">最近在学习JQuery,其实也不叫学习,很久以前就学过,只是有一段时间没用,有些生疏了,于是就做几个小例子来练习练习,为了方便以后查找就将这些小示例记录下来。
今天要分享的是基于JQuery实现的多标签的切换,JQuery就不用过多介绍了,网上一搜一大堆资料,当然这样的小示例也有很多,这里只是发表一些自己的想法。
下面是本次示例所使用的HTML页面:
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_4459d5a1-12fd-4ce7-882c-57d29d93452a" class="cnblogs_code_hide"> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5   <head> 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7         <title>JQueryProject1</title> 8         <meta name="author" content="Frank_Ren" /> 9         <link type="text/css" rel="stylesheet" href="css/myCSS.css" />10         <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>11         <script type="text/javascript" src="js/myJSFile.js"></script>12         <!-- Date: 2012-09-17 -->13   </head>14   <body>15         <div id="contenTab">16             <ul>17               <li class="showTab"><a href="/">标签1</a></li>18               <li><a href="/">标签2</a></li>19               <li><a href="/">标签3</a></li>20             </ul>21             <div id="content">22               <div class="showContent">这是内容1</div>23               <div>这是内容2</div>24               <div>这是内容3</div>25             </div>26         </div>27   </body>28 </html>
页: [1]
查看完整版本: 基于JQuery的多标签的实现