$(function() { var $current = $("ul.tab > li.selected"); var $content = $("div.contents > div") $content .not("div:eq(" + $current.index() + ")") .css("display", "none"); $("ul.tab > li").on("click", function() { var $self = $(this); if( $self.hasClass("no-selected") ) { $current .removeClass("selected") .addClass("no-selected"); $content .filter("div:eq(" + $current.index() + ")") .css("display", "none"); $current = $self; $current .removeClass("no-selected") .addClass("selected"); $content .filter("div:eq(" + $current.index() + ")") .css("display", "block"); } }); });
<ul class="tab"> <li class="selected">(´・ω・`)</li> <li class="no-selected">ヽ(*゚ω。)ノ</li> <li class="no-selected">(。◟‸◞。✿)</li> <li class="no-selected">٩(๑`^´๑)۶</li> </ul> <div class="contents"> <div> <p>ショボーン</p> </div> <div> <p>どてっ</p> </div> <div> <p>おこだよ!</p> </div> <div> <p>激おこぷんぷん丸</p> </div> </div>
@import "http://db.tt/9AQJciWR" html { font-size: 100%; } body { margin: 0 0 0 2em; font-size: 15px; width: 30em; color: #3c3c3c; } .tab { list-style: none; display: table; width: inherit; margin-top: 2em; padding: 0; } .tab > li { display: table-cell; cursor: pointer; text-align: center; padding: .3em 0 } .selected { border-width: 5px 5px 0 5px; border-style: solid; border-color: #3c3c3c; } .no-selected { border-bottom: 1px solid #3c3c3c; background-color: #3c3c3c; } .contents { border-width: 0 5px 5px 5px; border-style: solid; padding: 1em; position: relative; bottom: 1em; } }