Question

我点击链接时尝试激活某些元素。我现在正在使用此代码，当我点击带有类＆＃39; test＆＃39;的元素时，我可以添加和删除活动类。我需要的是单击一个链接并对div元素具有相同的行为。

我有：

＆＃13;

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

＆＃13;

.active{
  color: #F00;
}

＆＃13;

<div class='test active'>test</div>
<div class='test'>test</div>

<a class='link' href=''>Click me</a>

＆＃13;

当我单击div时，此代码会添加和删除活动类。如何通过点击链接做同样的事情？

Answer 1

如果要避免重定向，请添加href="javascript:;"。

在jQuery下面，代码片段将起作用：

$('.link').on('click', function(){
    $(this).toggleClass('active');
})

<强> Working Fiddle

<强>更新

突出显示多个divs

$('.link').on('click', function(){

    if($('.test.active').next().hasClass('test'))
    {
        $('.test.active').removeClass('active').next('.test').addClass('active');
    }
    else
    {
        $('.test.active').removeClass('active');
        $('.test:first').addClass('active');
    }
})

<强> Updated Fiddle

Answer 2

单击链接时，行为和方法将与单击按钮，div或页面的任何其他元素相同。

不同之处在于，<a>元素会将您重定向到另一个页面（如果它是＆＃34;相同的＆＃34;您来自哪里）并且更改不会被取消值得注意的。

您需要使用$("element").addClass("class");

Answer 3

您的代码应为：

$('.link').on('click', function () {
    var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
    $('.test.active').add($nextActive).toggleClass('active');
    return false;
});

Answer 4

根据您的帖子和评论，您希望将链接用作div的类更换器。干得好。编辑！

$('.link').on('click', function(){
    $('.test.active').toggleClass('active').next().addClass("active");
});

工作fiddle

Answer 5

只需删除.active类。下面的代码正在运行。

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

Answer 6

替换js功能

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

演示链接https://jsfiddle.net/ffjcfb2b/

Answer 7

你可以这样做。它将在链接点击时添加和删除活动类。

＆＃13;

$('.link').on('click', function(){
  $('.active').removeClass('active').siblings('.test').addClass('active');
});

＆＃13;

.active{
  color: #F00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>

<a class='link' href='#'>Click me</a>

＆＃13;

修改

这适用于无限div。

JQuery的：

$('.link').on('click', function(){ if($('.active').next().hasClass('test')) { $('.active').removeClass('active').next('.test').addClass('active'); } else { $('.active').removeClass('active'); $('.test:first').addClass('active'); } });

Fiddle

单击链接时如何添加类并删除类？

7 个答案: