基于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]