试图切换到可见/隐藏类，但文本重新出现，没有看到任何控制台错误

我想要一个链接来隐藏按钮。他们消失，但立即重新出现。试图切换到可见/隐藏类，但文本重新出现，没有看到任何控制台错误

一旦他们可以呆在嘴里，我会写更多的代码来显示隐藏“显示我”的显示/隐藏链接。

<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

试图切换到可见/隐藏类，但文本重新出现，没有看到任何控制台错误

回答

相关问题