无法获取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的工作

回答

相关问题