html 纵向选项卡,简单竖向Tab选项卡

*{ padding:0;margin: 0;}

.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }

#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}

#mytab li{ list-style-type: none; border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}

#mytab li.active{ border-right:1px solid #ffffff;}

#mytabContent{float: left;}

#mytabContent div{ display: none;}

#mytabContent div.active{display: block;}

#mytabContent div p{padding: 10px;}

• First
• Second
• Third
• Fourth

This is First

This is Second

This is Third