1

我试图有一个链接来隐藏按钮。它们消失但又立即重新出现。

一旦他们可以保持消失，我将编写更多代码来显示隐藏“显示我”的显示/隐藏链接。

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

4

2 回答 2

3

该页面可能正在重新加载，因为这是一个<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-26T20:17:19.593 回答
0

您也可以像这样进行快速修复：

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

注意"#"href部分的内部......

这是 JSFiddle：http: //jsfiddle.net/leniel/YpSKu/1/

于 2012-05-26T20:21:23.867 回答