xl1090453281 2019-05-20 16:46 采纳率: 100%
浏览 1603
已采纳

js.jq怎么实现点击一个div则出现另一个div在他下面？

图片说明
如图，点击一个框就出现他的解释说明，解释说明都是同一个div，css都一样，点击左边的出现的说明的背景图就是凹槽在左边，然后中间的就是在中间，都是换个背景图的问题，我现在做出来不管点击哪一排的出现的说明div都在第一排下面，请问各位大佬怎么让点击哪排就出现在哪排啊，麻烦上一下代码，十分感谢！

  • 写回答

6条回答 默认 最新

  • 易烊千玺的女朋友 2019-05-21 09:39
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .five-C{
            width: 500px;
            border:1px solid red;
            margin: auto;
            height: 500px;
        }
        .xidi-key-banner{
            display: flex;
            justify-content: center;
        }
        .xidi-key{
            border:1px solid orchid;
            width: calc(500px / 3 - 10px);
            margin: 5px;
            height: 100px;
        }
        .xidi-key-content{
            height: 200px;
            margin: 5px;
            position: relative;
        }
        .xidi-key-txt{
            border:1px solid red;
            height: 200px;
            position: absolute;
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
    <main class="five-C">
        <div class="xidi-key-banner">
            <div class="xidi-key"></div>
            <div class="xidi-key"></div>
            <div class="xidi-key"></div>
        </div>
        <div class="xidi-key-content">
            <div class="xidi-key-txt">
                内容1
            </div>
            <div class="xidi-key-txt">
                内容2
            </div>
            <div class="xidi-key-txt">
                内容3
            </div>
        </div>
    </main>

    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        $('.xidi-key').each((i,ele)=>{
            $(ele).click(()=>{
                $('.xidi-key-txt').fadeOut().eq(i).fadeIn();
            })
        })
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

悬赏问题

  • ¥50 gki vendor hook
  • ¥15 centos7中sudo命令无法使用
  • ¥15 灰狼算法和蚁群算法如何结合
  • ¥15 这是一个利用ESP32自带按键和LED控制的录像代码，编译过程出现问题，请解决并且指出错误，指导如何处理 ，协助完成代码并上传代码
  • ¥20 stm32f103,hal库 hal_usart_receive函数接收不到数据。
  • ¥20 求结果和代码，sas利用OPTEX程序和D-efficiency生成正交集
  • ¥50 adb连接不到手机是怎么回事？
  • ¥20 抓取数据时发生错误: get_mooncake_data() missing 1 required positional argument: 'driver'的问题,怎么改出正确的爬虫代码？
  • ¥15 vs2022无法联网
  • ¥15 TCP的客户端和服务器的互联