Vanilla JS: タブの切り替え

## 次の挙動をします。
開始画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f4205c92-8656-51e8-4f6d-7e415f379110.png)

apache2 をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/431f6a05-60f3-02ae-7df4-8ebb3a9b9e43.png)

php をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/2fd63063-ecad-79c9-2c72-6d9c2872f7c6.png)

mariadb をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/6ef5c149-a2c1-4172-35cc-9fa04e01bfcb.png)

## フォルダー構造

```text
$ tree .
.
├── click.hml
├── doc
│   ├── apache2.txt
│   ├── mariadb.txt
│   └── php.txt
├── fetch.js
└── index.html -> click.hml
```

## ファイル

```html:click.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブクリック</title>
</head>
<body>
<h2>タブクリック</h2>
<blockquote>
	<button id="apache2" onclick="fetch_proc(this)">apache2</button>
	<button id="php" onclick="fetch_proc(this)">php</button>
	<button id="mariadb" onclick="fetch_proc(this)">mariadb</button>
</blockquote>	

<div id="contents"></div>

<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<p>Sep/16/2023 AM 09:00</p>
<script src="fetch.js"></script>
</body>
</html>
```

```js:fetch.js
// -----------------------------------------------------------------------
//	fetch.js
//
//					May/09/2022
//
// -----------------------------------------------------------------------
'use strict'
// -----------------------------------------------------------------------
// [8-4]:
function read_fetch_proc(url,place)
{
	fetch(url).then((response) => {
		if(!response.ok) {
			console.log('Read error!')
			throw new Error('error')
		} 
		console.log('Read ok!')
		return response.text()
	}).then((data)  => {
		console.log(data)
		document.querySelector(place).innerHTML = data
	}).catch((error) => {
		console.log(error)
	})
}

// -----------------------------------------------------------------------
// [8]:
function fetch_proc(obj)
{
	const key = obj.id
	const place = "#contents"

	document.querySelector("#outarea_bb").innerHTML = key + " clicked ***"

	const matches = document.querySelectorAll("button")

	console.log("matches.length = " + matches.length)
	for (var it=0; it < matches.length; it += 1)
		{
		const id = matches[it].id
		console.log("id = " + id)
		const elemx = document.getElementById(id)
		elemx.style.color = 'black'
		}

	const elem = document.getElementById(key)
	elem.style.color = 'blue'

	const file_in = "./doc/" + key + ".txt"

	const data_aa = read_fetch_proc(file_in,place)
}

// -----------------------------------------------------------------------
```

```text:doc/apache2.txt
<pre>
$ Apachectl -v
Server version: Apache/2.4.41 (Ubuntu)
Server built:   2023-03-08T17:32:54
</pre>
```

```text:doc/php.txt
<pre>
$ php -v
PHP 7.4.3-4ubuntu2.19 (cli) (built: Jun 27 2023 15:49:59) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
</pre>
```

```text:doc/mariadb.txt
<pre>
MariaDB [(none)]> select version();
+----------------------------------+
| version()                        |
+----------------------------------+
| 10.6.12-MariaDB-0ubuntu0.22.04.1 |
+----------------------------------+
1 row in set (0.000 sec)
</pre>
```