みなさんこんにちは、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年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。