jquery 实现tab选项卡 实例

   HTML:  

              <div class="housesty">
                    <ul class="house_nav">
                        <li class="house_item active">A</li>
                        <li class="house_item">B</li>
                        <li class="house_item">C</li>
                    </ul>
                    <div class="house_content">
                        <div class="hou_item">a的内容</div>
                        <div class="hou_item" style="display: none;">b的内容</div>
                        <div class="hou_item" style="display: none;">c的内容</div>
                    </div>
                </div>

 

css :

.housesty{}
.house_nav {width:100%;padding-top:12px;display:flex;background:#ffffff;}
.house_item {height:96px;flex:1;position:relative;display:flex;justify-content:center;align-items:center;color:#333333;font-size:16px;}
.active {color:#0090ff;}
.active::after {position:absolute;bottom:0;left:50%;margin-left:-32px;content:'';width:64px;height:4px;background:#0090ff;border-radius:2px;}
.house_content {margin-top:16px;width:100%;display:flex;flex-direction:column;background:#ffffff;}
.hou_item {height:120px;display:flex;justify-content:space-between;align-items:center;padding-right:32px;box-sizing:border-box;margin-left:32px;border-bottom:1px solid #EEEEEE;}
 

 

js:

 

$('.house_nav ').children("li").each(function(index, element) {
        $(this).click(function() {
            $(this).addClass('active').siblings().removeClass('active')
            $($(".house_content").children()[index]).css("display", "block")
            $($(".house_content").children()[index]).siblings().css("display", "none")
        })

 })