質問: ### 実装したい内容 HTMLとjQueryを使ってホームページを作成しております。 タイトル1のリンクをクリックしたらid="mo1"の内容がclass="mo_wrap"内に表示され タイトル2のリンクをクリックしたらid="mo2"の内容がclass="mo_wrap"内に表示されるように 初心者ながらHTMLとjQueryを使って作成しておりましたがコードがめちゃめちゃになり表示がされないためこちらに質問させていただきます。 ### 教えていただきたい内容 jQueryにどのように記述すればdata-moin(任意のid)を取得し ここにクリックするボタンによって異なる表示をする事が出来るのか教えていただければ大変勉強になります。 お力をお貸しください。 ``` タイトル1 タイトル2 タイトル1 タイトル1の文章 タイトル2 タイトル2の文章 ``` よろしくお願いします。
回答: 記述方法のみわからないといった感じだと思いますので ``` $(function(){ $("a").on("click", function(){ var id = $(this).data("moin"); var element = $("#" + id); $(".mo_wrap").empty(); $(".mo_wrap").append(element.clone().children()); }) }); ``` 画面上で表示を切り替えたいということだけなら、 対象の領域で表示/非表示を切り替えるほうが良いかと思います。 ``` $(function(){ $("a").on("click", function(){ var id = $(this).data("moin"); $(".botan").hide(); $("#" + id).show(); }) }); ```