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

您可以使用我认为的CSS伪类：

a:active { color: lime }

更多信息CSS :active pseudo-class

Answer 2

使用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>

Answer 3

$(this).addClass('active');应附加，因此元素应该有2个类。不应删除其他类。你可以仔细检查。

在您的情况下，可能是您访问其他类的功能未正确编码

Answer 4

我做了一些更改，但您现在应该可以添加代码以使用活动类，而不必担心这一点......

<强> CSS

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

<强> HTML

<div class="links">
    <a href="#" data-link='one'>Link 1</a>
    <a href="#" data-link='two'>Link 2</a>
    <a href="#" data-link='three'>Link 3</a>
    <a href="#">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>

<强>的Javascript

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

$(".links a").click(function (e) {
    e.preventDefault();
    divWords.hide();
    sliding.find("." + $(this).data("link")).show();
});

jsfiddle示例......

http://jsfiddle.net/7n2d4b44/7/

让链接变为“活跃”＃34;没有类添加/删除

4 个答案: