jQuery addClass属性出现然后消失

问题描述：

我有一个列表与3项目，我做了一个jQuery的点击事件添加一个CSS类。但是，当我点击其中一个项目类属性设置，但直接后消失。jQuery addClass属性出现然后消失

任何想法为什么？

代码：

<ul> 
    <li><a id="home" href="home.php">Home</a></li> 
    <li><a id="apps" href="apps.php">Apps</a></li> 
    <li><a id="support" href="support.php">Support</a></li> 
</ul>

$(document).ready(function() { 
    $('#home').click(function(){ 
     $(this).addClass('btnActive'); 
    }); 
});

哪里是你的HTML吗？ – Sam

做一个jsfiddle，请 –

答

更新答：

当你点击一个链接时，页面的整个DOM被拆除和丢弃，并创造了DOM更换通过阅读新页面的HTML。所以您对旧DOM的更改不会持久。如果您希望在加载页面时将“btnActive”类放在链接上，则需要相应地修改home.php,apps.php和support.php页的HTML。

例如，为home.php：

<ul> 
    <li><a id="home" href="home.php" class="btnActive">Home</a></li> 
    <li><a id="apps" href="apps.php">Apps</a></li> 
    <li><a id="support" href="support.php">Support</a></li> 
</ul>

...但apps.php：

<ul> 
    <li><a id="home" href="home.php">Home</a></li> 
    <li><a id="apps" href="apps.php" class="btnActive">Apps</a></li> 
    <li><a id="support" href="support.php">Support</a></li> 
</ul>

或者，你可以使用JavaScript在页面加载基础上添加了location.href类，但真的最好修改HTML。但只是为了保证完整性，因为您使用链接的id和页面的名称相同的值，你可以这样做：

$(document).ready(function() { 
    var id = location.href.replace(/.*\/([\w]+)\.php$/, '$1'); 
    if (id) { 
     $("#" + id).addClass("btnActive"); 
    } 
});

从URL隔离页面的名称（忽略任何路径导致它，并在最后剥离.php），然后将其用作id并添加该类。再次，我不推荐它，但用你引用的URL，它应该工作。

下面的原始答案是从我意识到之前（感谢罗里），你可能确实需要遵循链接。

原来的答案：

因为你从来没有告诉浏览器不跟随链接，这样的页面重新加载得到。

您可以通过做return false;了事件处理程序的修复：

$(document).ready(function() { 
    $('#home').click(function(){ 
     $(this).addClass('btnActive'); 
     return false; // <=== The new bit 
    }); 
});

...或者接受event参数，就可以调用preventDefault：在一个jQuery

$(document).ready(function() { 
    // Accept the arg ---------v 
    $('#home').click(function (event){ 
     // call the preventDefault 
     event.preventDefault(); 
     $(this).addClass('btnActive'); 
    }); 
});

return false事件处理程序做两件事：

防止默认操作（在这种情况下，在链接之后）。
停止传播到祖先元素的事件。

preventDefault只是做了第一个。

大声笑，好赶 –

我怀疑这是问题，但它似乎像点击需要发生。我认为问题中代码的实际逻辑是有缺陷的。 –

@RoryMcCrossan：嗯，是的，看着标记我怀疑你是对的。 –

答

您需要防止链接加载 “home.php”：

$(document).ready(function() { 
    $('#home').click(function (e){ 
     e.preventDefault(); 
     $(this).addClass('btnActive'); 
    }); 
});

答

$(document).ready(function() { 
    $('#home').click(function (e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).addClass('btnActive'); 
    }); 
});

'e.stopPropagation（）;'不需要... – AvL

答

<!DOCTYPE html> 
<html> 
<head> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 

       $(document).ready(function() { 
        $('#home li').click(function() { 
         $('#home li').removeClass(); 
         $(this).addClass('btnActive'); 
        }); 
       }); 
      </script> 


</head> 
<body> 
<ul id="home"> 
    <li>Home</li> 
    <li>Apps</li> 
    <li>Support</li> 

</ul> 
</body> 
</html>

jQuery addClass属性出现然后消失

相关推荐