試圖切換到可見/隱藏類，但文本重新出現，沒有看到任何控制檯錯誤

我想要一個鏈接來隱藏按鈕。他們消失，但立即重新出現。試圖切換到可見/隱藏類，但文本重新出現，沒有看到任何控制檯錯誤

一旦他們可以呆在嘴裏，我會寫更多的代碼來顯示隱藏「顯示我」的顯示/隱藏鏈接。

<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('#small-text').hover (function() { $('body').removeClass().addClass('small-text'); }) 
    $('#large-text').hover (function() { $('body').removeClass().addClass('large-text'); }) 
    $('#button-selector').click (function() { $('#buttons').toggleClass('hidden'); }) 
    }); 

</script> 
<style> 
    ul {background:yellow} 
    li {background:green} 
    .small-text {font-size: small} 
    .large-text {font-size: large} 
    #buttons.hidden {display: none} 
    #buttons.shown {display: normal} 
</style> 
</head> 
<body> 
    <ul> 
    <li>AAA-22222</li> 
    <li>BBB-33333</li> 
    <li>CCC-44444</li> 
    </ul> 
    <div id="buutton_toggle"><a href="" id="button-selector">hide buttons</a></div> 
    <div id="buttons"> 
    <button id="small-text">Small</button> 
    <button id="large-text">Large</button> 
    </div> 
</body>

個人作業（學習JS/JS）

來源

2012-05-26 junky

你關兩個 ...爲什麼？ –

thx，固定，不變。 – junky

的頁面可能是重裝，因爲這是一個<a>元素與空HREF，試圖阻止默認操作，就像這樣：

$(document).ready(function(){ 
    $('#small-text').hover (function() { $('body').removeClass().addClass('small-text'); }); 
    $('#large-text').hover (function() { $('body').removeClass().addClass('large-text'); }); 
    $('#button-selector').click(function(e) { 
     e.preventDefault(); 
     $('#buttons').toggleClass('hidden'); 
    }); 
});

來源

2012-05-26 20:17:19 adeneo

是的！這解決了它！ – junky

我可以在8分鐘內接受 – junky

我認爲最好不要有空href，所以你應該做Leniel建議的做法，在href中添加hashsign。你應該仍然可以防止像我上面的回答這樣的默認動作不會導致滾動問題，只需將散列添加到href中，不要將其留空。另外，jQuery有一個'toggle（）'函數，只需要執行'$（'＃buttons'），就可以切換可見性。toggle（）;'不需要類就可以了，如果可見性是你所有的切換 – adeneo

你也可以這樣做一個快速修復：

<a href="#" id="button-selector">hide buttons</a>

注意"#"在href部分內...

這裏的的jsfiddle：http://jsfiddle.net/leniel/YpSKu/1/

來源

2012-05-26 20:21:23

試圖切換到可見/隱藏類，但文本重新出現，沒有看到任何控制檯錯誤

回答

相關問題