みなさんこんにちは、mayukouです。ECサイトには、配送に関するお知らせなど、常時載せておかないといけない情報があります。でも、ずっと出しているとあまり美しくない。そんな時は、読んだら、見ている人が自分の意思で消せるようにしました。JQueryで実現できます。ぜひ試して見てください。
スポンサードリンク
デモはこちら
スクリプトの解説
ここでは、クリックしたら要素を消す、というスクリプトを使用します。.clickと.removeを使っています。
CSSは任意で整えてください。
HTMLはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://use.fontawesome.com/3c70fafead.js"></script> <script> $(function(){ // $('#btn1').click(function(){ $(".oshirase").remove(); }); }); </script> <div class="oshirase"><a id="btn1"><i class="fa fa-times-circle" aria-hidden="true"></i></a> <div id="dv1">ここに、お知らせが入ります。天気による配送の情報など。</div> </div> </body> </html> |
最後に
いかがでしたか?ECサイトやブログ運営者で必要性を感じたらぜひ使って見てください。
投稿者プロフィール

- Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2019.09.29jQuery画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!
- 2019.07.27デザインお店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
- 2018.11.10Photoshop画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる!Bootstrapの特徴
この記事へのコメントはありません。