Question

所以我有一个没有ID的元素使用类名＆＃34; optin-box＆＃34;我有一个导航项目，其中包含一个＆＃34; my-nav＆＃34;目前有利润率最高：46px。当我点击optin框时，我想从＆＃34; my-nav＆＃34;中删除margin-top。类

我最近得到的是：

 $(".optin-box").on('click', (function(event) {
    $(".my-nav").removeAttr("style");
    console.log('firing');
});

或者这个

$(".optin-box").click (function() {
    $(".my-nav").css('margin-top', '0 !important');
    console.log('firing');
});

并尝试过变种，但我无法让它发挥作用。控制台日志输出但导航确实移动。

Answer 1

您忘记关闭(function(){})，将)添加到功能结尾。

＆＃13;

$(".optin-box").on('click', (function(event) {
   $(".my-nav").removeAttr("style");
   console.log('firing');
}));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="my-nav" style="margin-top:50px;">my-nav</div>
<button type="button" class="optin-box">optin-box</button>

＆＃13;

Answer 2

这很简单。请尝试以下方法：

$(".optin-box").on('click', (function(event) {
    $(".my-nav").css("margin-top", ""); //Thi will remove margin-top from your style tag
}));

Answer 3

您必须为该样式设置一个值，您想要chsnge。

$('my-nav').css ('margin-top': 0);

Answer 4

试试这个，它会将保证金重置为0px。

$('.my-nav').css('margin-top', '');

示例：

 <p id="change" style="margin-top:20px"> Let me check </p>
  <input type="button" value="ChangeMargin" id="btn"> 

 $('#btn').click(function () 
 { // alert('btn') 
   $('#change').css('margin-top', ''); })

Answer 5

$(document).ready(function(){
    $(".abc").click(function(){
       $(".my-nav").css("margin-top", "0px");
    });
});

div{
  border:1px solid;
  margin-top : 50px;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<div class="my-nav">

  <h3>This is a heading in a div element</h3>

  <p>This is some text in a div element.</p>

</div>
<p class="abc">Click here</p>
</body>
</html>

Answer 6

最好有一个定义边距的类

.mt {
    margin-top: 40px;
}

使用addClass / removeClass切换mt

$(".my-nav").removeClass("mt");

单击一个类时更改样式元素

6 个答案: