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'); 
    }); 
});

來源

2012-05-25 oceanen

哪裏是你的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只是做了第一個。

來源

2012-05-25 09:08:47

大聲笑，好趕 –

我懷疑這是問題，但它似乎像點擊需要發生。我認爲問題中代碼的實際邏輯是有缺陷的。 –

@RoryMcCrossan：嗯，是的，看着標記我懷疑你是對的。 –

您需要防止鏈接加載「home.php」：

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

來源

2012-05-25 09:09:08 AvL

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

來源

2012-05-25 09:09:45 thecodeparadox

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

-1

<!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>

來源

2012-05-25 09:25:45 Harish

jQuery addClass屬性出現然後消失

回答

相關問題