※ 2023/9/17 codepenの表示修正しました。
またもや次回はハンバーガーとか言いながら違う記事の更新です。今回紹介するのは、「クリックすると、指定した文字列を変更する」をjQueryで紹介しようと思います。最近の案件でメニューを開くと文字列を変える動きの実装が多いなっと感じたので急遽紹介！( メモ )
jQueryのソース
実装すると以下の様なソースになります。クラス名は自由に変えて大丈夫です！
やってることはものすごく簡単です。
See the Pen クリックで文字変更 by Chankei (@Chankei) on CodePen.
クリックイベントを取得して、replaceWithでhtmlごと変更しているだけです！
すっごく簡単なので、きっと初めての方がとっかかりやすいかな？と思います。
具体的に使う場所は、メニューを開いたときに「開く」→「閉じる」に変わるなどがあります。
リンク先の指定箇所までスムーススクロール
あまりにも短いのでもう一つ簡単なjsの紹介です。
こちらは、リンクをクリックしてページ遷移したあとに指定した( 指定方法も紹介 )idのついている場所までスムーススクロールします。
CMSを使っているサイトで一覧ページにリンクした際に、そこの記事の場所までとぶ！なんて感じで実際に使いました。
htmlのリンクの設定は以下のようになります。リンクさせたいページのパスの後に「?id=」で遷移先のページにあるidを指定します。これでスクロール先の指定は完璧です！
See the Pen 遷移先のidまでスムーススクロール by Chankei (@Chankei) on CodePen.
こちらの方法は実際に、WordPressやMovableTypeで使用しました。idを動的に出力すれば簡単です！
まとめ
今回は2つのソースを紹介しました！どちらも当サイトでは使っていませんが、実際に案件で使ったので( 少しソースは変えてる )きっといつか使う日がくると思います！
Webデザインをしているはずのサイトの記事が、デザインの記事がないって周りから言われるのでデザインのことも書きたいと思います。。。
お仕事的に、マークアップやCMS構築がメインなのでWebデザイナーよりもフロントエンドエンジニアなのかもしれないと思っている最近。。。
それではまた次回の記事でお会いしましょう！