無法獲取onclick activeClass的工作

我有四個按鈕，其中onclick事件可以改變下面的內容。我想補充無法獲取onclick activeClass的工作

a）活性類，以便懸停效果粘在點擊按鈕

b）在

我已經搜索並嘗試在頁面加載有第一個按鈕已經激活一些方法，但由於我對js和jquery的知識有限，我很迷茫。這就是我想最後

的jQuery：

// this script works 
$("#partnering-nav a").click(function(e){ 
e.preventDefault(); 
$(".toggle").hide(); 
var toShow = $(this).attr('href'); 
$(toShow).show(); 
}); 

// here I am lost 
var selector = '#partner-box'; 

$(selector).on('click', function(){ 
$(selector).removeClass('active'); 
$(this).addClass('active'); 
});

我做了一個的jsfiddle：https://jsfiddle.net/tnLgu9hx/2/

幫助非常感謝！

來源

2017-03-23 Samo Abnormalno

幾件事情：

partner-box是一類，而不是一個ID，所以你的選擇應該是.partner-box
active是一類要添加，而不是一個僞類，即:hover。 :active是一個瀏覽器控制的僞類，告訴鏈接何時被主動點擊。你不能通過JavaScript修改。但是，你可以添加一個標準的類。如果您將.partner-box.active添加到您的CSS，它應該工作。

CSS：

.partner-box.active, 
.partner-box:hover, 
.partner-box:active, 
.partner-box:target { 
    background: #d96580; 
    color: #fff; 
    background-image: url(img/Partnering/arrow-hover.png); 
    background-position: 105px 185px; 
    background-repeat: no-repeat; 
}

固定的選擇：

var selector = '.partner-box';

的jsfiddle：https://jsfiddle.net/tnLgu9hx/3/

來源

2017-03-23 18:11:10

這解決了它，非常感謝！也感謝您的解釋，感謝！ –

我寫新的代碼，使之易於理解

一）活躍的班級將轉移到bt您單擊

B n的）BTN1默認有活動類

codepen

HTML：

<div class="row"> 
    <div class="btn active">btn1</div> 
    <div class="btn">btn2</div> 
    <div class="btn">btn3</div> 
    <div class="btn">btn4</div> 
</div>

CSS：

.row { 
    position: absolute; 
    display: flex; 
} 

.btn { 
    padding: 10px 20px 10px 20px; 
    width: 50px; 
    margin: 0 10px 0 10px; 
    text-align: center; 
    line-height: 20px; 
    background-color: #f3f3f3; 
} 

.btn:hover, .btn.active { 
    background-color: #d96580; 
}

JS（JQuery的）：

$('.btn').click(function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active') 
})

來源

2017-03-23 18:36:26 Davy

謝謝你，現在我在加載頁面時也有一個活躍的類！ :) –

無法獲取onclick activeClass的工作

回答

相關問題