jQueryでアンカーをクリックした際に該当セクションを表示/非表示させる方法

前提・実現したいこと

jqueryで変数を使用し、アンカーをクリックすることにより特定のセクションを表示/非表示にさせたいです。

例を挙げると、
・#aaaのアンカーをクリックした際にsection id="aaa"の内容を表示させ、もう一度同じアンカーをクリックすると再び非表示になる
・aaaのセクションが表示されている際に#bbbのアンカーをクリックするとaaaのセクションは非表示になり、bbbのセクションが表示される
という状態にしたいです。アドバイスを頂けますと幸いです。よろしくお願い致します。

該当のソースコード

HTML
1<header>
2<h1>
3タイトル
4</h1>
5</header>
6<nav>
7<ul>
8<li>
9<a href="#aaa">aaa</a>
10</li>
11<li>
12<a href="#bbb">bbb</a>
13</li>
14<li>
15<a href="#ccc">ccc</a>
16</li>
17<li>
18<a href="#ddd">ddd</a>
19</li>
20</ul>
21</nav>
22<main>
23<section id="aaa">
24内容割愛
25</section>
26<section id="bbb">
27内容割愛
28</section>
29<section id="ccc">
30内容割愛
31</section>
32<section id="ddd">
33内容割愛
34</section>
35</main>

CSS
1<style type="text/css">
2
3body {
4 color: #000;
5 background: #FFF;
6 font-family: serif;
7 font-size: 13px;
8 line-height: 1.5;
9 letter-spacing: 1.5px;
10}
11
12header {
13 display: block;
14 position: relative;
15 width: 150px;
16 height: 200px;
17 top: 0;
18 right: 0;
19 bottom: 0;
20 left: 0;
21 margin: 30px auto;
22 background: url(画像URL) center center / cover no-repeat;
23 background-size: 200px;
24 border: solid 3px #000;
25 border-radius: 50%;
26}
27
28header h1 {
29 display: inline-block;
30 position: absolute;
31 top: 50%;
32 left: -10px;
33 padding-left: 10px;
34 transform: translateY(-50%);
35 -webkit-transform: translateY(-50%);
36 background: rgba(255,255,255,.75);
37 font-size: 25px;
38}
39
40nav ul {
41 margin: 15px auto;
42 text-align: center;
43}
44
45nav ul li {
46 display: inline-block;
47 margin: 0 5px;
48}
49
50nav ul li a {
51 border-bottom: solid 1px #000;
52 font-family: cursive;
53 font-size: 20px;
54}
55
56main {
57 width: 90%;
58 max-width: 796px;
59 margin: 15px auto;
60}
61
62section {
63 display: none;
64 margin: 15px auto;
65}
66
67</style>

jquery
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2<script>
3
4$(function () {
5    $('[href^=#aaa]').click(function () {
6        $('#aaa').fadeToggle("slow");
7    });
8});
9
10$(function () {
11    $('[href^=#bbb]').click(function () {
12        $('#bbb').fadeToggle("slow");
13    });
14});
15
16$(function () {
17    $('[href^=#ccc]').click(function () {
18        $('#ccc').fadeToggle("slow");
19    });
20});
21
22$(function () {
23    $('[href^=#ddd]').click(function () {
24        $('#ddd').fadeToggle("slow");
25    });
26});
27
28</script>

試したこと

上記のように、jqueryで変数を使わずに直接idを指定してアンカーをクリックすると該当セクションが表示/非表示になるようにはしましたが、望ましくはありません。
また、いずれかのセクションが表示状態の時に別IDのアンカーをクリックするとその表示状態であったセクションが表示状態のままになってしまうというのも望ましくありません。

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

回答3件

ベストアンサー

こういうのはクラスなどを振って処理をするのが賢明

javascript
1<script>
2$(function(){
3  $('.target').hide();
4  $('.trigger').on('click',function(){
5    $('.target').not($($(this).attr('href'))).hide();
6    $($(this).attr('href')).toggle();
7  });
8});
9</script>
10<header>
11<h1>
12タイトル
13</h1>
14</header>
15<nav>
16<ul>
17<li>
18<a href="#aaa" class="trigger">aaa</a>
19</li>
20<li>
21<a href="#bbb" class="trigger">bbb</a>
22</li>
23<li>
24<a href="#ccc" class="trigger">ccc</a>
25</li>
26<li>
27<a href="#ddd" class="trigger">ddd</a>
28</li>
29</ul>
30</nav>
31<main>
32<section id="aaa" class="target">
33内容割愛A
34</section>
35<section id="bbb" class="target">
36内容割愛B
37</section>
38<section id="ccc" class="target">
39内容割愛C
40</section>
41<section id="ddd" class="target">
42内容割愛D
43</section>
44</main>

投稿2019/07/29 00:43

yambejp

総合スコア114843

gedachtnis

2019/07/29 07:49

ご回答ありがとうございました。idとclassは併用しても良いのですね。恥ずかしながら知りませんでした。まさに目から鱗が落ちる思いです。今回こちらのご回答をベストアンサーに選ばせていただきました。

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

Jquery セレクタで検索してみると良いかも

javasctipt
1$(function () {
2 $("a").click(function () {
3  let id=$(this).attr("href");
4  $("section").not(id).hide();
5  $(id).slideToggle();
6 });
7});

投稿2019/07/27 18:23

編集2019/07/27 18:31

Dot

総合スコア120

gedachtnis

2019/07/29 07:45

ご回答ありがとうございました。こちらも参考になりました。まだ始めたばかりで知識不足なので精進します。

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

色々やり方はあると思いますがすごい簡単に書くのならば

jQuery
1$(function () {
2	$('a[href^=#]').click(function() {
3		var hash = $(this).attr('href');
4	    switch(hash) {
5	    case '#aaa':
6	        $('#aaa').show();
7	        $('#bbb').hide();
8	        $('#ccc').hide();
9	        $('#ddd').hide();
10	        break;
11	    case '#bbb':
12	        $('#aaa').hide();
13	        $('#bbb').show();
14	        $('#ccc').hide();
15	        $('#ddd').hide();
16	        break;
17	    case '#ccc':
18	        $('#aaa').hide();
19	        $('#bbb').hide();
20	        $('#ccc').show();
21	        $('#ddd').hide();
22            break;
23	    case '#ddd':
24	    	$('#aaa').hide();
25	        $('#bbb').hide();
26	        $('#ccc').hide();
27	        $('#ddd').show();
28	        break;
29	    }
30	});
31});