jquery上下滑动的选项卡,tab标签

jquery左右滑动的选项卡,tab标签

css代码和js文件在演示页面可以查看源码

本例只放了2个tab，需要更多的话也很方便添加

?

?

1. <script?type="text/javascript">??
2. ??????
3. ????????$(function()?{??
4. ??????????????
5. ????????????var?indicator?=?$('#indicator'),??
6. ????????????????????indicatorHalfWidth?=?indicator.width()/2,??
7. ????????????????????lis?=?$('#tabs').children('li');??
8. ??
9. ????????????$("#tabs").tabs("#content?section",?{??
10. ????????????????effect:?'fade',??
11. ????????????????fadeOutSpeed:?0,??
12. ????????????????fadeInSpeed:?400,??
13. ????????????????onBeforeClick:?function(event,?index)?{??
14. ????????????????????var?li?=?lis.eq(index),??
15. ????????????????????????newPos?=?li.position().left?+?(li.width()/2)?-?indicatorHalfWidth;??
16. ????????????????????indicator.stop(true).animate({?left:?newPos?},?600,?'easeInOutExpo');??
17. ????????????????}??
18. ????????????});???
19. ??
20. ????????});??
21. ??
22. ????</script>??

?

1. <nav>?????????
2. ????????<ul?id="tabs">??
3. ????????????<li><a?class="current"?href="#">导航菜单</a></li>??
4. ????????????<li><a?href="#">TAB标签</a></li>??
5. ????????</ul>??
6. ????????<span?id="indicator"></span>??
7. ????</nav>??
8. ??????
9. ????<div?id="content">??
10. ??????
11. ????????<section>?????????????????
12. ????????????<p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>???????????
13. ????????</section>??
14. ??????
15. ????????<section>?????????
16. ????????????<p>tab标签,选项卡,选卡,jquery选项卡,标签页</p>?????????
17. ????????</section>??
18. ??
19. ????</div>??

?

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