タグを押しても、ほかのタグが消えません

表題の通り、タグを押しても、ほかのタグが消えません。
Goal:タグを押すと、そのタグの対象のみが表示されるようにしたいです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Tab</title>]
8    <link rel="stylesheet" href="CSS/reset.css">
9    <link rel="stylesheet" href="CSS/Tab.css">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11    <script src="jquery/script.js"></script>
12</head>
13<body>
14    <ul>
15        <li><a href="#tab1" class="carrent">01</a></li>
16        <li><a href="#tab2">02</a></li>
17        <li><a href="#tab3">03</a></li>
18        <li><a href="#tab4">04</a></li>
19    </ul>
20    <div id="contents"> 
21
22        <div id="tab1">
23            <p><strong>01</strong></p>
24            <p>
25                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
26                Maecenas porttitor congue massa. Fusce posuere, magna sed <br>
27                pulvinar ultricies, purus lectus malesuada libero, sit amet <br>
28                commodo magna eros quis urna.Nunc viverra imperdiet enim. <br>
29                Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br>
30                tristique senectus et netus et malesuada fames ac turpis egestas. <br>
31                Proin pharetra nonummy pede. Mauris et orci.
32            </p>
33        </div>
34        <div id="tab2">
35            <p><strong>02</strong></p>
36            <p>
37                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
38                Maecenas porttitor congue massa. Fusce posuere, magna sed <br>
39                pulvinar ultricies, purus lectus malesuada libero, sit amet <br>
40                commodo magna eros quis urna.Nunc viverra imperdiet enim. <br>
41                Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br>
42                tristique senectus et netus et malesuada fames ac turpis egestas. <br>
43                Proin pharetra nonummy pede. Mauris et orci.
44            </p>
45        </div>
46        <div id="tab3">
47            <p><strong>03</strong></p>
48            <p>
49                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
50                Maecenas porttitor congue massa. Fusce posuere, magna sed <br>
51                pulvinar ultricies, purus lectus malesuada libero, sit amet <br>
52                commodo magna eros quis urna.Nunc viverra imperdiet enim. <br>
53                Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br>
54                tristique senectus et netus et malesuada fames ac turpis egestas. <br>
55                Proin pharetra nonummy pede. Mauris et orci.
56            </p>
57        </div>
58        <div id="tab4">
59            <p><strong>04</strong></p>
60            <p>
61                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
62                Maecenas porttitor congue massa. Fusce posuere, magna sed <br>
63                pulvinar ultricies, purus lectus malesuada libero, sit amet <br>
64                commodo magna eros quis urna.Nunc viverra imperdiet enim. <br>
65                Fusce est. Vivamus a tellus.Pellentesque habitant morbi <br>
66                tristique senectus et netus et malesuada fames ac turpis egestas. <br>
67                Proin pharetra nonummy pede. Mauris et orci.
68            </p>
69
70        </div>
71    </div>
72</body>
73</html>

CSS
1@charset "UTF-8";
2
3body{
4	font-family: Arial, sans-serif;
5	-webkit-font-smoothing: antialiased;
6	background:#E46E6E;
7}
8
9h1{
10	padding:45px 0;
11	color:#C15757;
12	font-size:5em;
13	font-weight:bold;
14	text-align:center;
15}
16
17main{
18	width:1000px;
19	margin:0 auto;
20	display:block;
21}
22
23ul li{
24	float:left;
25	margin-right:1px;
26	list-style-type:none;
27}
28
29ul li a{
30	font-size:2em;
31	font-weight:bold;
32	color:#FFF;
33	text-decoration:none;
34	display:block;
35	width:100px;
36	padding:15px 20px;
37	background:#C15757;
38}
39
40ul li a:hover{
41	background:#D26161;
42	color:#FFF;
43}
44
45ul li a.current{
46	background:#F5F4F2;
47	color:#C15757;
48}
49
50#contents{
51	clear:both;
52	margin-bottom:150px;
53}
54
55#contents div{
56	padding:30px 20px;
57	background:#F5F4F2;
58}
59
60#contents p{
61	margin-top:20px;
62	line-height:2em;
63	color:#C15757;
64}
65
66#contents strong{
67	font-size:4em;
68	font-weight:bold;
69	color:#D6AF62;
70}

JQuery
1$(function(){
2
3    //tab1以外を非表示にする
4    $('#contents div【id !="tab1"】').hide();
5
6//タブをクリック
7$("a").click(function(){
8    //一度すべてのコンテンツを非表示にする
9    $("contents div").hide();
10
11    //選択されたコンテンツを再表示する
12    $($(this).attr("href")).show();
13
14    return false;
15 });
16});

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

回答1件

ベストアンサー

js
1$(function() {
2
3  //tab1以外を非表示にする
4  $('#contents div[id !="tab1"]').hide();
5
6  //タブをクリック
7  $("a").click(function() {
8    //一度すべてのコンテンツを非表示にする
9    $("#contents div").hide();
10
11    //選択されたコンテンツを再表示する
12    $($(this).attr("href")).show();
13
14    return false;
15  });
16});