2

私は主に幼稚園から高校までの学校で使用されているウェブサイトを持っています。Facebookの「like」やPinterestの「pinit」のようなソーシャルメディアボタンがいくつかあります。ただし、これらのボタンを非表示にしたいのですが、何かを1回クリックする必要がある場所（ボタンを覆っているがクリックすると消える画像など）や、スクロールして離れるタブなどがあります。その背後にあるボタンを表示します）。この理由は、これらのサイトは通常学校でブロックされており（おそらくこれについて私ができることは何もないことを認識しています）、これらのボタンはブロックされると少し見苦しく見えます（疑問符などが表示されます）これらの場合のボタンの）。ただし、ブロックされていない人にも簡単にアクセスして見てもらいたいです。

私は、何かをクリックするまでボタンがすぐに表示されない、これに対する簡単な解決策を探しています。

4

2 に答える 2

2

JQueryまたはその他のサポートライブラリを使用している場合は、視覚効果がたくさんある場合でも、目標を達成するための方法がたくさんあります。

とにかく、それを達成する最も簡単な方法は、要素の「display」属性で遊ぶことです。

これをhtmlヘッドタグに追加します。

<script type="text/javascript>

    function showElement(){
       // get a reference to your element, or it's container
       var myElement = document.getElementById('elementId');
       myElement.style.display = '';
       hideImage();
    }

    function hideImage(){
       var myElement = document.getElementById('imageId');
       myElement.style.display = 'none';
    }

</script>

次に、非表示のコンテンツを表示するために使用する要素にクリックイベントを追加します。

<img id="imageId" onclick="showElement()" src="..."/>

デフォルトで「非表示」要素を非表示にする場合は、インラインスタイルを追加します。

<div id="elementId" style="display:none">...your buttons here...</div>

明らかに、それを達成するためのより良い方法はたくさんあります（たとえば、cssクラスを変更する）が、上記の手順で作業できると思います。

答えを改善するために編集：

次のようなHTML構造を作成します。

<div>
   <img id="imageId" alt="" src="..." onclick="showElement()">
   <div id="elementId" style="display:none">
      <!-- your buttons, anchors or anything else you want to be hidden by default-->
   </div>
</div>

そのため、画像をクリックすると、ボタンが表示され、画像が消えます。

于 2012-11-19T15:12:06.323 に答える
0

ご協力いただきありがとうございます！私はこれを試しましたが、うまくいきました。これは非常に単純な解決策であり（javascriptはわかりませんが）、ボタンを覆っている画像がクリックされるまで基本的にボタンを非表示にするという、私がやりたいことを達成したと思います。念のため、使用した正確なコードは次のとおりです。

<script type="text/javascript">
    function showElement(){
        var myElement = document.getElementById('elementId');
    myElement.style.display = '';
    hideImage();
    }

    function hideImage(){
    var myElement = document.getElementById('imageId');
    myElement.style.display = 'none';
    }
</script>

（私が変更したのは、最初の行に欠落している引用符を追加し、要素への参照に関する1行を削除したことです。これはオプションであると想定しているためです。）htmlの部分については、次のようにしました。

<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>

（画像タグを閉じる、画像の寸法を入力するなど、この部分はあまり変更していません。）うまくいけば、これを間違えなかったと思いますが、意図したとおりに機能しているようです。他にいい感じになるのは、ホバーしたときに「人差し指のある手」の記号が表示されるようにする方法があるかどうかです。クリック可能であることを明確にするためです。画像ですが、そうでない場合は必須ではありません。

于 2012-11-22T21:34:19.173 に答える