Tab标签实现

来源：互联网发布：淘宝手机退货地址编辑：程序博客网时间：2024/06/05 21:21

一个html视图展示不同的div，Tab标签页实现

<style>

.contentBox{

    display: none;

}

#contentBox{

    display: block;

}

.all{
color: #387AC9;
border-bottom: .01rem solid #387AC9;
}

</style>

<html>

<!--全部明细-->

    <ul class='header'>

        <li class='all'>全部</li>

        <li>收入</li>

        <li>支出</li>

    </ul>

    <!--列表-->

    <div class="content">

        <div class='contentBox' id='contentBox'></div>

        <!--收入-->

        <div class='contentBox'></div>

        <!--支出-->

        <div class='contentBox'></div>

    </div>

</html>

$(function(){ 

var list = $(".header li");
var content = $(".contentBox");
var now,nowNumber;
list.click(function(){
now = $(this);
nowNumber = list.index(now); //获取下标并赋值
list.removeClass("all");
$(this).addClass("all");
content.hide();
content.eq(nowNumber).show();
})

})

</script>

阅读全文

0 0