Javashop Tab页jQuery插件使用指南

一、概述

Javashop Tab页jQuery插件是一款基于jquery插件的Tab页生成器。

可用于快速生成Tab页面,有如下特点:

  •  基于jquery插件的风格,只需引入一个插件脚本和按照规格格式编写HTML,其它不用关心,生成方便灵活
  •  同个页面可生成多个Tab页,互不干扰

效果预览

 

 

二、使用说明

1.基本使用指南

1.引入选器插件:

<script type="text/javascript" 
src="/adminthemes/new/js/jquery.Tab.js"></script>

2.编写HTML:

<div id="test_tab" style="margin:20px;">
    <div class="contentTab">
        <ul class="tab">
            <li tabid="one" class="active" >第一</li>
            <li tabid="two" >第二</li>
        </ul>
    </div>

    <div class="tab-page">
        <div tabid="one" class="tab-panel" >
            <h1>我是第一个内容</h1>
        </div>
        <div tabid="two" class="tab-panel" style="display: none;" >
             <h1>我是第二个内容</h1>
        </div>
    </div>
</div>

这里需要注意的是,这个HTML格式并不是全部规定死的。只要有ul 和 class为tab-page的div,其他元素可随意增加,样式随意写。

3.调用插件生成选择器(选择需要悬浮的元素)

<script type="text/javascript">

$(function(){

    $("#test_tab").Tab();

});

</script>

如上代码在id为test_tab的div中实现了tab页。

“Javashop Tab页jQuery插件使用指南”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注