用jquery写一个滑动TAB 例子

HTML结构

    <div class="tab">
      <div class="nav">
        <ul class="clear">
          <li class="on"><a href="#">one</a></li>
          <li><a href="#">two</a></li>
        </ul>
        <div class="navtip"></div>
      </div>
      <div class="content">
        <div>one content</div>
        <div>two content</div>
      </div>
    </div>


function tabSilde(nav, content, navtip, dealytime, on, type) {
    $(nav).children().bind(type, (function () {
            var $tab = $(this);
            var tab_index = $tab.prevAll().length;
            var $content = $(content).children();
            $(nav).children().removeClass(on);
            $tab.addClass(on);
            $(navtip).stop(true,false).animate({left: $tab.position()['left']+'px', width: $tab.width()},dealytime)
            $content.hide();
            $content.eq(tab_index).show();
        }));
}

 

posted on 2015-04-08 11:39  bigdesign  阅读(223)  评论(0编辑  收藏  举报