表示内容の切り替えを行いたい

サイトの制作中で、aタグで表示内容を切り替えたいのですがどのように実装すればいいのかわからずつまずいています。

実装したいこと
・<a href="#home2">をクリックした際<div id="home2">の中身だけ表示()
・<a href="#home">をクリックした際<div id="home">の中身だけ表示()

HTML
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<meta http-equiv="Content-Style-Type" content="text/css">
6<meta http-equiv="Content-Script-Type" content="text/javascript">
7<title>SAMPLE</title>
8</head>
9<body>
10<div id="home"><!--ここ2-->
11<img style="width: 70%;" src="picture/logo.png" alt="logo"><a href="#home2"><!--ここ1--><img style="width: 30%;" src="picture/logo2.png" alt="menu"></a>
12おもな表示内容です。
13</div>
14<div id="home2"><!--ここ1-->
15<img style="width: 70%;" src="picture/logo.png" alt="logo"><a href="#home"><!--ここ2--><img style="width: 30%;" src="picture/logo3.png" alt="menu"></a>
16サブの表示内容です。
17</div>
18</body>
19</html>

試したこと1

:targetを利用してみましたが両方とも表示されてしまいました。

HTML
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<meta http-equiv="Content-Style-Type" content="text/css">
6<meta http-equiv="Content-Script-Type" content="text/javascript">
7<title>SAMPLE</title>
8<style>
9.001:target~#home, #home2:not(:target) {
10  display: none;
11}
12</style>
13</head>
14<body>
15<div id="home" class="001">
16<img style="width: 70%;" src="picture/logo.png" alt="logo"><a href="#home2"><img style="width: 30%;" src="logo2.png" alt="menu"></a>
17おもな表示内容。
18</div>
19<div id="home2" class="001">
20<a href="#home"><img style="width: 30%;" src="logo2.png" alt="menu"></a>
21サブの表示内容。
22</div>
23</body>
24</html>

まだまだ初心者で乱文ですがご回答のほどよろしくお願いします。

8/10追記

:targetを利用した主な目的としてハッシュ値が何もなかった場合、自動的に#homeの内容を表示したいという意図があります。

試したこと2

HTML
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<meta http-equiv="Content-Style-Type" content="text/css">
6<meta http-equiv="Content-Script-Type" content="text/javascript">
7<title>SAMPLE</title>
8<style>
9.change:target~#home, #home2:not(:target) {
10  display: none;
11}
12</style>
13</head>
14<body>
15<div id="home" class="change">
16<img style="width: 70%;" src="picture/logo.png" alt="logo"><a href="#home2"><img style="width: 30%;" src="logo2.png" alt="menu"></a>
17おもな表示内容。
18</div>
19<div id="home2" class="change">
20<img style="width: 70%;" src="picture/logo.png" alt="logo"><a href="#home"><img style="width: 30%;" src="logo2.png" alt="menu"></a>
21サブの表示内容。
22</div>
23</body>
24</html>