javascript - 让链接变成 "active"而不添加/删除类

Question

是否可以在不添加/删除类的情况下将链接更改为“事件”？我遇到的问题是，如果“a”标签更改为“a.active”，我的其他脚本将无法工作。

所以这种方式适用于链接，但不适用于我的其他脚本;(，因为将添加和删除一个类。

<script>
    $(function(){
        $('.mydiv a').click(function(){
            $('.mydiv .active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

有人可以帮我吗？

更新2
这就是我使用的脚本: http://jsfiddle.net/7n2d4b44/2/

Answer 1

使用data-* attributes要保存数据，请勿使用类名作为数据。您可以使用 jQuery .data获取 data-* 属性值的方法。

var sliding = $('.sliding_div');
var divWords = $('.sliding_div p');

$('.links a').click(function () {
    //pass .data the name after the `data-` part in the attribute name
    var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector
    
    divWords.hide().filter(c).show(); // hide all words, 
    // filter to get the ones with class like the clicked link
    // show the filtered ones

    //You could move this to its own handler
    //$(".links a.close).click(...)
    c === '.close' ? sliding.hide() : sliding.show();
    // if c is .close show the sliding_div else hide it
  
    $(".links .active").removeClass("active");
    $(this).addClass("active");
});

.links {
    width: 60px;
    float: left;
}
.sliding_div {
    padding:10px;
    width: 200px;
    float: right;
    background-color:#ccc;
    display:none;
}
.sliding_div div {
    display:none;
}
.active{
    color:#F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links"> 
    <a href="#" data-filter='one'>Link 1</a>
    <a href="#" data-filter='two'>Link 2</a>
    <a href="#" data-filter='three'>Link 3</a>
    <a href="#" data-filter='close'>Close</a>
</div>

<div class="sliding_div">
    <p class='one two three'>House</p>
    <p class='one two three'>Cat</p>
    <p class='one'>Dog</p>
    <p class='three'>Car</p>
    <p class='one two'>Man</p>
</div>