jQuery-div点击展示详细内容

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

Vivinia_Vivinia

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

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jquery 框架 class div

本文链接：https://blog.csdn.net/hester_hester/article/details/51124473

版权

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

摘要由CSDN通过智能技术生成

目标效果：

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

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=&#