问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JQ 点击隐藏显示

头像
陈88
    29544167
    头像
    scort
      8.4k2633
      <div class="div1">
    <ul>
    </ul>
    <div class='div2'></div>
</div>
<div class="div1">
    <ul>
    </ul>
    <div class='div2'></div>
</div>

      点击div1，让div2显示，点下一个div1,让第一个div2隐藏，第二个div2显示，
      怎么实现啊

      javascript
      阅读 4.6k
      5 个回答
      得票最新
      头像
      NeoChang
        1.4k53048
        ✓ 已被采纳

        HTML:

        <div class="div1">
    <ul></ul>
    <div class='div2'></div>
</div>
<div class="div1">
    <ul></ul>
    <div class='div2'></div>
</div>

        CSS:

        .div1 {
    width: 50px;
    height: 50px;
    background: yellow;
}
.div2 {
    width: 40px;
    height: 40px;
    background: red;
    display: none;
}

        jQuery:

            $('.div1').click(function () {
       $(this).find('.div2').show()
               .end()
               .siblings('.div1').find('.div2').hide();
    });

        仅仅想装B的用链式代码，写法可能有点拖沓。见谅。支持 scort 的写法。

        头像
        scort
          8.4k2633
          $('.div1').click(function(){
    $('.div2').hide();
    $(this).find('.div2').show();
});
          头像
          姜立
            1.4k51223
            <!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <style>
        .div1{
            width: 200px;height: 200px;background: gold;
        }
        .div2{
            width: 100px;height: 100px;background: red;
        }
    </style>
</head>
<body>
<div>
    <div class="div1" id="fisrstdiv1">
        <div class='div2' id="firstdiv2">div2</div>
    </div>
    <br><br><br><br><br>
    <div class="div1" id="seconddiv1">
        <div class='div2' id="seconddiv2">div2</div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#fisrstdiv1').click(function () {
            $('.div2').show();
        });
        $('#seconddiv1').click(function () {
            $('#firstdiv2').hide();
            $('#seconddiv2').show();
        });
    })

</script>
</body>
</html>

            不知道是不是你要的

            头像
            Sherwin
              482513

              如果元素少的话，加个id写动作就是，没必要用同一个class。

              头像
              大汉
                2674
                    <div class="div1 active">
        我是div1
        <div class="div2" style="display: block;">我是div2</div>
    </div>
    <div class="div1">
        我是div1
        <div class="div2" style="display: none;">我是div2</div>
    </div>
    <script type="text/javascript">
        $(function(){
            $(document).on('click','.div1',function(){
                /*逻辑就是给当前显示的div1加上active，并展示当前点击的div1下的div2*/

                /*当然也可以直接使用css规定.div.active>.div2{display:block;}*/

                //检测点击的是否已经显示
                if(!$(this).hasClass('active')){
                    //点击的div1没有active
                    //去掉active并隐藏div2
                    $('.active').removeClass('active').find('.div2').hide();

                    //激活当前点击div1
                    $(this).addClass('active').find('.div2').show();
                };
            });
        }());
    </script>

                写好了总要贴上来

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏