为什么没有选项卡插件的效果

来源:3-5 选项卡插件——tabs

晒渔网

2017-11-22 13:58

<!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: "mousemove" //通过移动鼠标事件切换选项卡

                })

            });

        </script>

    </body>

</html>


写回答 关注

1回答

  • 小小小孟
    2017-11-23 10:34:26

    你自己用工具试一下应该是可以的

jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69095 学习 · 400 问题

查看课程

相似问题