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 に答える