简单的tab标签
?
演示
?
?
XML/HTML Code
- <div?id="moving_tab">??
- ????<div?class="tabs">??
- ????????<div?class="lava"></div>??
- ????????<span?class="item">Popular?Posts</span>??
- ????????<span?class="item">Recent?Posts</span>??
- ??
- ????</div>??
- ??????????????????????
- ????<div?class="content">?????????????????????????
- ????????<div?class="panel">???????????????????????
- ????????????<ul>??
- ????????????????<li><a?href='#'>Panel?01?Item?01</a></li>??
- ????????????????<li><a?href='#'>Panel?01?Item?02</a></li>??
- ????????????????<li><a?href='#'>Panel?01?Item?03</a></li>??
- ????????????????<li><a?href='#'>Panel?01?Item?04</a></li>??
- ????????????????<li><a?href='#'>Panel?01?Item?05</a></li>??
- ????????????</ul>??
- ????????????<ul>??
- ????????????????<li><a?href='#'>Panel?02?Item?01</a></li>??
- ????????????????<li><a?href='#'>Panel?02?Item?02</a></li>??
- ????????????????<li><a?href='#'>Panel?02?Item?03</a></li>??
- ????????????????<li><a?href='#'>Panel?02?Item?04</a></li>??
- ????????????????<li><a?href='#'>Panel?02?Item?05</a></li>?????????????
- ????????????</ul>?????????????????????????
- ????????</div>??
- ??
- ????</div>????
- </div>??
?
JavaScript Code
- <script>??
- ??
- $(document).ready(function?()?{??
- ??
- ????//set?the?default?location?(fix?ie?6?issue)??
- ????$('.lava').css({left:$('span.item:first').position()['left']});??
- ??????
- ????$('.item').mouseover(function?()?{??
- ????????//scroll?the?lava?to?current?item?position??
- ????????$('.lava').stop().animate({left:$(this).position()['left']},?{duration:200});??
- ??????????
- ????????//scroll?the?panel?to?the?correct?content??
- ????????$('.panel').stop().animate({left:$(this).position()['left']?*?(-2)},?{duration:200});??
- ????});??
- ??????
- });??
- ??
- </script>??
?
原文地址:http://www.freejs.net/article_tabbiaoqian_129.html