jQueryでクリックすると文字列を置き換える

jQueryでクリックすると文字列を置き換える

こんにちは、ちゃんけいです。
またもや次回はハンバーガーとか言いながら違う記事の更新です。

今回紹介するのは、「クリックすると、指定した文字列を変更する」をjQueryで紹介しようと思います。最近の案件でメニューを開くと文字列を変える動きの実装が多いなっと感じたので急遽紹介!( メモ )

jQueryのソース

実装すると以下の様なソースになります。クラス名は自由に変えて大丈夫です!
やってることはものすごく簡単です。

See the Pen XNLdBj by Chankei (@Chankei) on CodePen.0

クリックイベントを取得して、replaceWithでhtmlごと変更しているだけです!
すっごく簡単なので、きっと初めての方がとっかかりやすいかな?と思います。

具体的に使う場所は、メニューを開いたときに「開く」→「閉じる」に変わるなどがあります。

リンク先の指定箇所までスムーススクロール

あまりにも短いのでもう一つ簡単なjsの紹介です。
こちらは、リンクをクリックしてページ遷移したあとに指定した( 指定方法も紹介 )idのついている場所までスムーススクロールします。

CMSを使っているサイトで一覧ページにリンクした際に、そこの記事の場所までとぶ!なんて感じで実際に使いました。

htmlのリンクの設定は以下のようになります。リンクさせたいページのパスの後に「?id=」で遷移先のページにあるidを指定します。これでスクロール先の指定は完璧です!

See the Pen 遷移先のidまでスムーススクロール by Chankei (@Chankei) on CodePen.0

続いては、jQueryの紹介ですが、こちらは説明が長くなるので割愛!笑
コメントを入れてる部分の数値を変更してお好みの高さで止めて、速さでスクロールできます。

See the Pen 遷移先のidまでスムーススクロール by Chankei (@Chankei) on CodePen.0

こちらの方法は実際に、WordPressやMovableTypeで使用しました。idを動的に出力すれば簡単です!

まとめ

今回は2つのソースを紹介しました!どちらも当サイトでは使っていませんが、実際に案件で使ったので( 少しソースは変えてる )きっといつか使う日がくると思います!

福岡でWebデザインをしているはずのサイトの記事が、デザインの記事がないって周りから言われるのでデザインのことも書きたいと思います。。。
お仕事的に、マークアップやCMS構築がメインなのでWebデザイナーよりもフロントエンドエンジニアなのかもしれないと思っている最近。。。

それではまた次回の記事でお会いしましょう!ちゃんけいでした。