<ul class="tabNav"> <li class="active"> <span href="condition">tab1</span> </li> <li> <span href="info">tab2</span> </li> </ul> <div class="tabContent"> <div class="tab-pane active" id="condition"> condition </div> <div class="tab-pane" id="info"> info </div> </div>
ul.tabNav{ padding:22px 80px 0px ; border-bottom: 1px solid #dddddd; font-size: 0px; } ul.tabNav li{ list-style: none; display: inline-block; text-align: center; font-size: 14px; width: 95px; box-sizing: border-box; background-color: #ebf1fe; height: 40px; line-height: 16px; border-radius: 4px 4px 0 0; padding: 12px 17px; margin:0px 1px; border: 1px solid #dddddd; border-bottom: 0; cursor:pointer; } ul.tabNav li span{ text-decoration: none; color: #666666; font-weight: bold; } ul.tabNav li.active{ background-color: #FFFFFF; cursor: default; } ul.tabNav li.active:after{ content: " "; position: relative; display: table; width: 93px; height: 2px; top: 10px; background-color: #FFFFFF; left: -17px; } ul.tabNav li.active span{ color: #19abff; } .tabContent > .tab-pane{ display: none; transition: opacity 0.15s ease ; } .tabContent > .tab-pane.active{ display: block; }
$(".tabNav li").on("click",function(){ var id = ""; if(!$(this).hasClass("active")){ id = $(this).find("span").attr("href"); $(".tabContent .tab-pane").removeClass("active"); $(".tabNav li").removeClass("active"); $("#"+id).addClass("active"); $(this).addClass("active"); } });