自身の制作した制作物のポータルサイトみたいなものを作成するにあたってのセクションタグの使用法について質問です。
naviタグでマークアップしたメニュー内のそれぞれのテキストをクリックしたとき、それに対応するdivを表示させたいと考えているのですがそのdiv要素はsectionタグで囲えばよいのでしょうか?
例えば、
HTML
1<navi> 2 <div class="menu"> 3 <ul> 4 <li id="about"><span class="menu-button" id="about-button">about</span></li> 5 <li id="app"><span class="menu-button" id="app-button">app</span></li> 6 <li id="blog"><span class="menu-button" id="blog-button">blog</span></li> 7 </ul> 8 </div> 9 </navi>
のaboutをクリックしたときは、
HTML
1<section> 2 <div class="menu"> 3 <div class="menu-div" id="about-div"> 4 <!--aboutをクリックした時に表示--> 5 </div> 6 <div class="menu-div" id="app-div"> 7 <!--appをクリックした時に表示--> 8 </div> 9 <div class="menu-div" id="blog-div"> 10 <!--blogをクリックした時に表示--> 11 </div> 12 </div> 13 </section>
内のid="about-divのdivを表示するといった感じです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>ホームページ</title> 7 </head> 8 <body> 9 10 <header> 11 <div class="title"> 12 ホームページタイトル 13 </div> 14 15 <navi> 16 <div class="menu"> 17 <ul> 18 <li id="about"><span class="menu-button" id="about-button">about</span></li> 19 <li id="app"><span class="menu-button" id="app-button">app</span></li> 20 <li id="blog"><span class="menu-button" id="blog-button">blog</span></li> 21 </ul> 22 </div> 23 </navi> 24 25 <section> 26 <div class="menu"> 27 <div class="menu-div" id="about-div"> 28 <!--aboutをクリックした時に表示--> 29 </div> 30 <div class="menu-div" id="app-div"> 31 <!--appをクリックした時に表示--> 32 </div> 33 <div class="menu-div" id="blog-div"> 34 <!--blogをクリックした時に表示--> 35 </div> 36 </div> 37 </section> 38 39 </header> 40 41 </body> 42</html> 43
補足ですが<navi>ではなく<nav>が正しいです。
なぬっっっ!補足ありがとうございました!
回答2件
あなたの回答
tips
プレビュー