Slide滑动 tab效果

Slide滑动 tab效果

演示

 

XML/HTML Code

1. <div id="hero-slider">  
2.         <ul>  
3.             <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>  
4.             <li><a href="#" rel="#panel-2">Item 2</a></li>  
5.             <li><a href="#" rel="#panel-3">Item 3</a></li>  
6.         </ul>  
7.         <div class="mask">  
8.             <div class="slider-body">  
9.                 <div class="panel" id="panel-1">  
10.                     <h2>Jquery, Ajax无刷新翻页,支持跳转页面</h2>  
11.                     <p>Jquery, Ajax无刷新翻页,支持跳转页面  
12. freejs已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。  
13. 数据库与本站其他翻页的相同，本例和《jquery 无刷新翻页》均是非常实用的案例，而且本例更简单易懂</p>  
14.                 </div>  
15.                 <div class="panel" id="panel-2">  
16.                     <h2>php jquery 多文件上传</h2>  
17.                     <p>php jquery 多文件上传  
18.  本例与《jQuery无刷新多文件上传,批量上传,单独文件进度显示》效果差不多的，区别在于本例选择了文件马上就提交上传了.本例更简单,服务器端文件就一个</p>  
19.                 </div>  
20.                 <div class="panel" id="panel-3">  
21.                     <h2>可以分列排序,隐藏的表格,异步加载 mootools</h2>  
22.                     <p>本例为mootools，没有对应类别  
23. 可以点击表格的列名称排序，调整列宽度，控制一部分内容隐藏</a></p>  
24.                 </div>  
25.                   
26.             </div>  
27.         </div> <!-- .mask -->  
28.         <div class="clear"></div>  
29.     </div> <!-- #hero-slider -->  

 

原文地址: http://www.freejs.net/article_jquerywenzi_118.html