jQuery-div点击展示详细内容

最新推荐文章于 2023-04-01 21:17:05 发布

原创最新推荐文章于 2023-04-01 21:17:05 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #框架 #class #div

jQuery 专栏收录该内容

4 篇文章

订阅专栏

使用jQuery实现点击带有圆点的文字，相关div内容逐渐显示，再次点击其他文字时，之前的内容会收起并切换到新内容的显示。步骤包括新建项目并引入jQuery框架，在showDetail.html页面设置信息。

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

目标效果：

点击带圆点的文字，会慢慢出现绿色框包含具体内容，再点击另一类的文字，会将之前的收起后再慢慢显示新内容。

1.新建项目，导入jQuery框架。

2.创建showDetail.html页面，编写信息。

showDetail页面：

<!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="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("span[title*='zjlc']").click(function () {    //*= 匹配所有span中title值包含zjlc的，另外$=代表匹配所有span中title值以zjlc结尾的，^=代表匹配所有span中title值以zjlc开头的的
                $("div[lang='a'][id!='zjlc']").hide(1000);  //匹配所有div中lang值等于a并且id不等于zjlc的
                $("#zjlc").show(2000);                      //id为zjlc
            });
            $("span[title*='zwgk']").click(function () {
                $("div[lang='a'][id!='zwgk']").hide(1000);
                $("#zwgk").show(2000);
            });
            $("span[title*='zmhd']").click(function () {
                $("div[lang='a'][id!='zmhd']").hide(1000);
                $("#zmhd").show(2000);
            });
        });
    </script>
    <style type="text/css">
        tr {
            font-size: 12px;
            color: #3d3d3d;
            font-family: 宋体;
            line-height: 180%;
        }

        td {
            font-size: 12px;
            color: #3d3d3d;
            font-family: 宋体;
            line-height: 180%;
        }

        span {
            font-size: 12px;
            color: #3d3d3d;
            font-family: 宋体;
            line-height: 180%;
        }

        .font14_1b {
            font-family: 宋体;
            font-size: 14px;
            font-variant: normal;
            font-style: normal;
            text-decoration: none;
            color: #2f2f2f;
        }

        .font12 {
            font-family: 宋体;
            font-size: 12px;
            font-variant: normal;
            font-style: normal;
            text-decoration: none;
            color: #2f2f2f;
        }

        .intro {
            background-color: Lime;
            color: Blue;
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">

                <tr>
                    <td bgcolor="#e3e8fd" height="20">
                        <span class="font14_1b" title="走进聊城">
                            <strong>走进聊城</strong>             <!--strong标签是加粗并变大，一般作为小标题-->
                        </span>
                    </td>
                </tr>
                <tr>
                    <td height="20">
                        <span class="font12" title="历史沿革_zjlc">·历史沿革</span>   <!--同一个栏目里使用同种后缀标记，方便点击方法中识别-->
                             
                        <span class="font12" title="自然地理_zjlc">·自然地理</span>
                             
                        <br />
                        <div id="zjlc" class="intro" lang="a">    <!--lang赋值a是为了点击方法中进行区别的，无其他作用-->
                            <div>讲述城市背后发展的故事</div>
                            <div>城市文化五十年</div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#e3e8fd" height="20">
                        <span class="font14_1b" title="政务公开">
                            <strong>政务公开</strong>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td height="20">
                        <span class="font12" title="政务动态_zwgk">·政务动态</span>
                             
                        <span class="font12" title="领导专页_zwgk">·领导专页</span>
                             
                        <br />
                        <div id="zwgk" class="intro" lang="a">
                            <div>政务动态简介</div>
                            <div>领导分工</div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#e3e8fd" height="20">
                        <span class="font14_1b" title="政民互动">
                            <strong>政民互动</strong>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td height="20">
                        <span class="font12" title="在线访谈_zmhd">·在线访谈</span>
                             
                        <span class="font12" title="市政府部门信箱_zmhd">·市政府部门信箱</span>
                             
                        <br />
                        <div id="zmhd" class="intro" lang="a">
                            <div>在线解决民生问题</div>
                            <div>网上传达民情</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

3.完成后就有目标效果了。