【JavaScript】タブメニューの実装 - Qiita

<!-- タブメニュー --> <ul> <li class="tab active">Portfolio</li> <li class="tab">Jobs</li> <li class="tab">Design</li> <li class="tab">Event</li> </ul> <!-- タブコンテンツ --> <div class="panel show">Portofolioです</div> <div class="panel">Jobsです</div> <div class="panel">Designです</div> <div class="panel">Eventです</div> /* 子要素の.tabをfloatで左に浮かせたので親要素の高さを確保する */ ul:after{ content: ''; display: block; clear: both; }