qq_42200633
shaokel
采纳率56.1%
2019-05-08 13:53 阅读 1.3k

请求大佬支援!!!display:block和display:none在一起的时候不是会覆盖none吗?

我的display:block没有覆盖display:none

图片说明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        *{/*去除页面原有边距*/
            margin: 0;
            padding: 0;
        }

        .wrapper{/*定义标题盒子*/
            width: 326px;
            height: 29px;
            margin: 100px auto;
            border: 1px solid red;
        }

        .products{/*定义产品盒子*/
            width: 1200px;
            height: 500px;
            margin: 0px auto;
            border: 1px solid #931CBB;  
        }

        .tab-item{/*标题栏设置*/
            float:left;
            display: block;
            font-size: 20px;/*字体大小*/
            background-color: white;
        }

        .active{/*标题栏选中状态*/
            border-top: 3px solid red;  
        }

        .selected{/*显示产品*/
            display: block;
        }

        .main{/*隐藏产品*/
            display: none;
        }

        img{/*定义图片*/
            float: left;
            width: 600px;
            height: 250px;
        }

        a:hover{/*鼠标悬停变色*/
            background-color:aqua;
        }

        ul{/*去除小圆点*/
            list-style: none;
        }

        a{
            text-decoration: none;/*去除下划线*/
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item"><a href="#">国际大牌</a></li>
            <li class="tab-item"><a href="#">国妆名牌</a></li>
            <li class="tab-item"><a href="#">清洁用品</a></li>
            <li class="tab-item"><a href="#">男士精品</a></li>
        </ul>
    </div>

    <div class="products">
        <div class="main">
            <img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png">
            <img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png">
            <img alt="" src="../../../图片/黄昏少女/11.png">
            <img alt="" src="../../../图片/黄昏少女/8.png">
        </div>

        <div class="main">
            <img alt="" src="../../../图片/黄昏少女/1.png">
            <img alt="" src="../../../图片/黄昏少女/2.png">
            <img alt="" src="../../../图片/黄昏少女/3.png">
            <img alt="" src="../../../图片/黄昏少女/4.png">
        </div>

        <div class="main">
            <img alt="" src="../../../图片/黄昏少女/5.png">
            <img alt="" src="../../../图片/黄昏少女/5.png">
            <img alt="" src="../../../图片/黄昏少女/5.png">
            <img alt="" src="../../../图片/黄昏少女/5.png">
        </div>

        <div class="main">
            <img alt="" src="../../../图片/黄昏少女/7.png">
            <img alt="" src="../../../图片/黄昏少女/7.png">
            <img alt="" src="../../../图片/黄昏少女/7.png">
            <img alt="" src="../../../图片/黄昏少女/7.png">
        </div>
    </div>
</body>
    <script>
//      需求1:给tab栏的每一个li标签设置鼠标移入事件:当前li添加active类,其他的兄弟li移除active类
//      需求2:给当前索引栏引入一致的div,让他添加selected类,其他的兄弟div移除selected类
        $(function(){
            $('.tab>.tab-item').mouseenter(function(){
                $(this).addClass('active').siblings('li').removeClass('active');

//          获取当前这个li标签的索引
                var index1=$(this).index();
                console.log(index1);    

//      需求2:
                $('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected');           
            });

            $('.tab>.tab-item').mouseleave(function(){
                $(this).removeClass('active');
            });
        });
    </script>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    qq_22847605 qq_22847605 2019-05-08 14:15

    首先,你.main这个类样式是在父模块div,.selected是在.main的div模块里面的子模块的类样式。这时整个父模块已经不可见了(如同我移走了整座房子,里面的椅子等物品还在原地吗??),所以当然包含的子模块也是看不见的。但是反过来就不同了,我移走了椅子,但是房子是不是还在呢?这时候表面上是不是可以看做是display:block覆盖了display:none了。这问题说明是你对于css的设置的一种误解。具体问题还是具体分析啊,不是谁都可以覆盖谁的,css理论上也不是这样写的

    点赞 评论 复制链接分享
  • Tonysame Johnny℃ 2019-05-08 13:57

    要提高级别 同级别的后面的覆盖前面的

    点赞 评论 复制链接分享
  • AnJeremy AnJeremy 2019-05-08 14:19

    越级了 可以在第二个里面跳出来

    点赞 评论 复制链接分享
  • BIackPIume B|ackP|ume 2019-05-08 14:23

    二楼的22847605正解,比喻很好,你可以在添加selected类时移除main类

    点赞 评论 复制链接分享

相关推荐