任意のIDを設定しクリックするボタンによって異なる表示をしたい

###実装したい内容
HTMLとjQueryを使ってホームページを作成しております。
タイトル１のリンクをクリックしたらid="mo1"の内容がclass="mo_wrap"内に表示され
タイトル２のリンクをクリックしたらid="mo2"の内容がclass="mo_wrap"内に表示されるように
初心者ながらHTMLとjQueryを使って作成しておりましたがコードがめちゃめちゃになり表示がされないためこちらに質問させていただきます。
###教えていただきたい内容
jQueryにどのように記述すればdata-moin(任意のid)を取得し

<div class="mo_wrap">ここに</div>クリックするボタンによって異なる表示をする事が出来るのか教えていただければ大変勉強になります。

お力をお貸しください。

<!-- HTML -->
<a data-moin="mo1">タイトル１</a>
<a data-moin="mo2">タイトル２</a>

<div id="mo1" class="botan">
  <h3>タイトル１</h3>
  <p>タイトル１の文章</p>
</div>
<div id="mo2"  class="botan">
  <h3>タイトル２</h3>
  <p>タイトル２の文章</p>
</div>

<div class="mo_wrap">
  <!-- ここにクリックするボタンによって異なる表示をしたい -->
</div>


<!-- css -->
<style>
  .botan{display:none;}
</style>


<!-- jQuery -->
<script>
  <!-- ここになにを書けばdata-moinを取得し -->
</script>

よろしくお願いします。

退会済みユーザー

2017/11/10 15:45

実際のHTMLでもdiv より後に style を書いています？

kei344

2017/11/10 15:46

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

satoshickkk

2017/11/13 02:48

cssは分けて書いています、当方の書き方のせいで実際のHTMLと勘違いさせてしまって申し訳ございません。

satoshickkk

2017/11/13 02:49

ご指導ありがとうございます。実際に書いたコードを投稿してより具体的に改めて質問させて頂きます。

行動規範の内容に同意します

回答1件

ベストアンサー

記述方法のみわからないといった感じだと思いますので

javascript
1$(function(){
2    $("a").on("click", function(){
3        var id = $(this).data("moin");
4        var element = $("#" + id);
5        $(".mo_wrap").empty();
6        $(".mo_wrap").append(element.clone().children());
7    })
8});

画面上で表示を切り替えたいということだけなら、
対象の領域で表示/非表示を切り替えるほうが良いかと思います。

javascript
1$(function(){
2    $("a").on("click", function(){
3        var id = $(this).data("moin");
4        $(".botan").hide();
5        $("#" + id).show();
6    })
7});