Question

我有四个带onclick事件的按钮，可以改变下面的内容。我想添加

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/

非常感谢！

Answer 1

有几件事：

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/

Answer 2

我编写新代码以便于理解

a）活动类将转移到您单击的btn

b）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')
})

无法使用onclick activeClass工作

2 个答案: