jquery插件学习之选项卡 生手求建议

jquery插件学习之选项卡 新手求建议


请大家给点意见。。。

多多支持。。。

下载地址：基于jquery的选项卡插件

使用方法：
html结构：

<div id="div" class="simpleTab">
        <div class="title">
                <ul>
                    <li id="1">Tab1</li>
                    <li id="2">Tab2</li>
                    <li id="3">Tab3</li>
                    <li id="4">Tab4</li>
                </ul>
            </div>
            <div class="content">
                <div>
                <p>Tab1</p>
                    <p>This is a simple tab.</p>
                    <p>This is the first tab.</p>
                    <ul>
                    <li>tab1</li>
                        <li>the first tab.</li>
                        <li>the 1st tab.</li>
                    </ul>
                </div>
                <div>
                <p>Tab2</p>
                    <p>I'm the second tab.</p>
                </div>
                <div>
                <p>Tab3</p>
                    <p>Hello! I'm the 3rd.</p>
                </div>
                <div>
                <p>Tab4</p>
                    <p>oh! I'm the last.</p>
                </div>
            </div>
        </div>

引用文件：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="simpleTab.css" rel="stylesheet" />
<script src="jquery.simpleTab.js"></script>

调用方法：

$(document).ready(function() {
$("#div").simpleTab({
//sid: 3,        //设置默认选中项
//width:500,     //设置选项卡宽度
});
})

默认选中项也可以在html结构中指定（只需给相应的li加上class="selected"）：

<div class="title">
  <ul>
       <li id="1">Tab1</li>
       <li id="2">Tab2</li>
       <li id="3" class="selected">Tab3</li> 
 
       <li id="4">Tab4</li>
   </ul>
</div>

不错不错。多做几套样式，弄成个自定义标签就更好了。
[解决办法]
/uploadfile/jiaocheng/2014/011348/201401132348423542.gif

查看更多 下一篇