Question

I am not really familiar with jQuery. the idea is link a href="..?episode=1"will be add class active, while the other link will not be add class active link a href='..?episode=2" will be added class active, while the other link will not be active add class Similar to other links. I have code html

<ul id="episode">
    <li><a  href="index.php?episode=1" class="active">1</a></li>
    <li><a  href="index.php?episode=2">2</a></li>
    <li><a  href="index.php?episode=3">3</a></li>
    <li><a  href="index.php?episode=4">4</a></li>
</ul>

code js

$(document).ready(function() {
    $("a").click(function(){
        if($("a").text()!="1"){
            $("a.active1").removeClass("active1");
            $("a").addClass("active1");
            alert($(this)).text();
        }
    })
})

The problem is when one episode is selected, the message pops up 2 times and class are added to and then is removed.I do not know what the reason is? there i can tell me one way is no solution

Answer 1

使用此代码段：

它的作用是从所有a元素中删除活动类，然后将活动类添加到当前单击的元素中。

＆＃13;

$(document).ready(function() {
    $("a").click(function(){
      $("a").removeClass("active");
      $(this).addClass("active");
      alert($(this).text());
    });
});

＆＃13;

.active {
  color: red;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="episode">
    <li><a  href="#" class="active">1</a></li>
    <li><a  href="#">2</a></li>
    <li><a  href="#">3</a></li>
    <li><a  href="#">4</a></li>
</ul>

＆＃13;

我已更改href所以它可以在这里使用，随时使用您原来的html布局。

Answer 2

试试这个：

$(document).ready(function() {
    var $wrapper = $('#episode');
    var $links = $wrapper.find('a');

    $wrapper.on('click', 'a', function (e) {
        var $active = $(e.currentTarget);

        $links.removeClass('active');
        $active.addClass('active');
        alert($active.text());
    });
});

Answer 3

首先，我建议你在jquery中阅读一些关于event delegation的内容，因为如果这个列表变大，你就是在浪费资源。

其次，您应该使用this：

$(document).ready(function() {
    $("ul").on('click', 'a', function () {
        $("a.active").removeClass("active");
        $(this).addClass('active');
    });
});

这应该有效并且有效。我希望它有所帮助。

Answer 4

似乎你的jQuery代码不正确，修正后的代码如下

$(document).ready(function() {
    $("a").click(function(){
    if($(this).text()!="1"){
        $("a.active").removeClass("active");
        $(this).addClass("active");
        alert($(this).text());
    }
 });
});

要解决问题，请检查http://jsfiddle.net/sacmonk/o7dv0cm4/

Answer 5

使用.find（'a'）

示例：http://jsfiddle.net/kevalbhatt18/gnnudnu7/1/

$(document).ready(function () {
    $('li a').click(function () {
        $('#episode').find('a').removeClass('active')
        $(this).addClass('active');
    })
    })

在多个链接<a>

5 个答案: