用JQuery实现QQ的页面功能

最新推荐文章于 2023-04-23 18:55:06 发布

原创最新推荐文章于 2023-04-23 18:55:06 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #qq #function #xhtml #html

javascript dom jquery 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用jQuery实现QQtab效果的代码示例，包括样式设计、事件处理和交互逻辑，旨在帮助开发者快速理解并应用这一常见UI组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <script src="../jquery-1.6.3.js" type="text/javascript"></script>
    <style type="text/css">
      ul{list-style-type:none;width:100px;}
      .hear{background-color:Blue;cursor:pointer;}
      .body{border-color:Green;border-width:1px;border-style:;}
    </style>
    <script type="text/javascript">
        $(function () {
            $("#qq li:odd").addClass("body");
            $("#qq li:even").addClass("hear").click(function () {
                $(this).next("li.body").show("fast").siblings("li.body").hide("500");
            });
            $("#qq li:first").click();//模拟点击
        });
    </script>
</head>
<body>
<ul id="qq">
    <li>我的好友</li>
    <li>刘德华<br />周杰伦<br />周星星<br /></li>
    <li>我的同学</li>
    <li>萨达姆<br />拉登<br />奥巴马<br /></li>
    <li>陌生人</li>
    <li>郭台铭<br />李彦宏<br />马化腾<br /></li>
</ul>
</body>
</html>