單擊類時更改樣式元素

因此，我有一個沒有使用類名「optin-box」的ID的元素，並且我有一個導航項目，其中包含當前具有margin-top的「my-nav」類： 46px。當我點擊選擇啓用箱，我想從「我的-導航」類別中刪除的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'); 
});

並試過各種變化，但我無法得到它的工作。控制檯日誌輸出，但導航完全移動。

來源

2017-04-06 Sam Allen

這將有助於在此處查看您的實際HTML和CSS。如何將「margin-top」應用於元素？通過「樣式」或CSS類？ –

您可以創建另一個類並使用'.removeClass（'existing class_name'）'然後'addClass（'new_class'）' –

它是否通過css或style應用並不重要。檢查[小提琴]（https://jsfiddle.net/prwrp3xk/），它的工作正常。恐怕您訪問錯誤的元素 – MUT

這很簡單。請嘗試以下操作：

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

來源

2017-04-06 10:32:51

您必須將值設置爲您要修改的樣式。

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

來源

2017-04-06 10:33:59 user7776232

試試這個，它會將邊距重置爲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', ''); })

來源

2017-04-06 10:34:35

請解釋此代碼爲何有所幫助。 – Raidri

雖然這段代碼片段是受歡迎的，並且可能會提供一些幫助，但它會[如果它包含解釋]（/ meta.stackexchange.com/q/114762）* how *和* why *會大大改進，這將解決問題。請記住，你正在爲將來的讀者回答這個問題，而不僅僅是現在問的人！請編輯您的答案以添加解釋，並指出適用的限制和假設。 –

更新，好的謝謝，我會記住 –

你忘了關(function(){})，加入)到的函數的末尾。

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

<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>

來源

2017-04-06 10:36:13

$(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>

來源

2017-04-06 10:41:30

更好是有一個類定義了餘量

.mt { 
    margin-top: 40px; 
}

使用addClass/removeClass以切換公噸

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

來源

2017-04-06 10:41:38

單擊類時更改樣式元素

回答

相關問題