条件 ・カレント表示もできるタブ切り替え ・なるべくシンプルな記述 ・html構造や装飾が変わっても使いまわせる HTML <div class="ChangeElem_Btn_Content"> <button class="ChangeElem_Btn">1番目のタブ</button> <button class="ChangeElem_Btn">2番目のタブ</button> <button class="ChangeElem_Btn">3番目のタブ</button> </div> <ul> <li class="ChangeElem_Panel">1番目のコンテンツ</li> <li class="ChangeElem_Panel">2番目のコンテンツ</li> <li class="ChangeElem_Panel">3番目のコンテンツ3</li> </ul> [補足] ・タブに
![jQueryとCSSでシンプルなタブ切り替え - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bfaa684a6804e9a857f73385a9844dad92d2e00d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9alF1ZXJ5JUUzJTgxJUE4Q1NTJUUzJTgxJUE3JUUzJTgyJUI3JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJUUzJTgxJUFBJUUzJTgyJUJGJUUzJTgzJTk2JUU1JTg4JTg3JUUzJTgyJThBJUU2JTlCJUJGJUUzJTgxJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1lMWJiZDAyNWZjMWEyMDA0OGYxNWYyODJhYjA5YTcxZg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBDaGluYXRzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZjMzNTAwZDgxMjZiZTQzZGEzYzEzOTI5OGNiNzQxMg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Ded3cd98595aacb795d0bc5cb6549cd7f)