jQuery插件（选项卡）

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>选项卡插件</title>
        <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">最爱吃的水果</a></li>
                    <li><a href="#tabs-2">最喜欢的运动</a></li>
                </ul>
                <div id="tabs-1">
                    <p>橘子</p>
                    <p>香蕉</p>
                    <p>葡萄</p>
                    <p>苹果</p>
                    <p>西瓜</p>
                </div>
                <div id="tabs-2">
                    <p>足球</p>
                    <p>散步</p>
                    <p>篮球</p>
                    <p>乒乓球</p>
                    <p>骑自行车</p>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
               $("#tabs").tabs ({
                    //设置各选项卡在切换时的动画效果
                    fx: { opacity: "toggle", height: "toggle" },
                    event: "click" //通过移动鼠标事件切换选项卡
                })
            });
        </script>
    </body>
</html>

 

posted @ 2016-03-15 15:04  纸鸢&红豆·绿豆  阅读(261)  评论(0)  编辑  收藏  举报