Question

我的问题标题似乎不对，因为我找不到合适的标题。

我在我的HTML中使用猫头鹰cursol。请参阅html代码

 <div role="tabpanel" class="tab-pane fade in active" id="ios">
   <ul class="screenshot-carousel">
     <li class="item"><img class="im" style="margin-left:1px;" src="images/screenshot1.jpg" alt="Image"></li>
  </ul>
</div>

当图像在中心时，

类活动被删除。所以我想要做的是，当div有类名激活时，我想应用一个margin-top：-36px到img，类名为“im”，当没有活动类时，我想应用margin-top 0px 。

我试过这个jQuery代码来实现它但不起作用......

<script>
     $(document).ready(function(){
         var hasClass= $("div").hasClass("active");
         if(hasClass){
           $(".im").css("margin-top","-36px");
         }
     });

</script>

Answer 1

所以我想做的是，当div有类名激活时，我想应用一个margin-top：-36px到img的类名＆＃34; im＆＃34;当没有活跃的课程时，我想申请margin-top 0px。

您使用CSS执行此操作：将类im放在img上，然后使用此CSS控制margin-top：

.im {
    margin-top: 0px;
}
.active .im {
    margin-top: -36px;
}

简化示例：

＆＃13;

document.querySelector("input[type=checkbox]").addEventListener("click", function() {
  document.querySelector(".container").classList.toggle("active", this.checked);
  var img = document.querySelector(".img");
  var style = window.getComputedStyle ? getComputedStyle(img) : img.currentStyle;
  console.log("\"Image\"'s margin-top is now: " + style.marginTop);
}, false);

＆＃13;

.im {
    margin-top: 0px;
}
.active .im {
    margin-top: -36px;
}

.container {
  border: 1px solid #ddd;
  height: 80px;
  min-height: 80px;
}
.img {
  border: 1px solid green;
}

＆＃13;

<div class="container">
  This is the container
  <div class="img im">
    This is the "image"
  </div>
</div>
<label>
  <input type="checkbox">
  Make the container "active"
</label>

＆＃13;

Answer 2

试试这个

$(document).ready(function(){
    $("div.tab-pane").each(function() {
        if($(this).hasClass("active")) { //* active pane
            $(".im").css("margin-top","0px"); //* rm margin for all images
            $(this).find(".im").css("margin-top","-36px"); // set margin for img of active pane
        }
    });
});

如何在嵌套元素上应用css

2 个答案: