(移动端）简单的顶部导航栏

话不多说，依旧先上图

image

image.gif

代码量不大，有轻微动画效果，不支持左右滑动，切换流畅，具体代码如下：

HTML：

    <div class="nav-box">
        <div class="nav-tap">
            <a class="nav-tap-item" onclick="tabChange(0)">派单中</a>
            <a class="nav-tap-item nav-tap-item-on" onclick="tabChange(1)">服务中</a>
            <a class="nav-tap-item" onclick="tabChange(2)">已完成</a>
        </div>
        <div class="nav-body">
            <div id="tap1" class="nav-body-item" hidden>
                /* 第一个页面内容 */
            </div>
            <div id="tap2" class="nav-body-item">
                /* 第二个页面内容 */
            </div>
            <div id="tap3" class="nav-body-item" hidden>
                /* 第三个页面内容 */
            </div>
        </div>
    </div>

image.gif

默认显示中间那页，由hidden控制隐藏，三个导航栏都设置click事件，调用js文件里的函数，并传入固定的参数。

CSS：

.nav-box{
    width: 100%;
    height: 100%;
    position: relative;
}
.nav-tap{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 0;
    font-size: 1rem;
    background-color: #fff;
    padding: 0 4%;
    box-sizing: border-box;
}
.nav-tap-item{
    width: 100%;
    display: block;
    color:#9a9a9a;
    font-size: 1rem;
    padding: .8rem 0;
    text-align: center;
    transition: .3s;
}
.nav-tap-item-on{
    font-size: 1.1rem;
    color: #4a90e2;
    position: relative;
}
.nav-tap-item-on:after{
    content: '';
    width: 80%;
    height: 4px;
    background-color: #4a90e2;
    position: absolute;
    bottom: 0;
    left:10%;
}
.nav-body{
    margin-top: 14%;
}

image.gif

动画效果由transition属性控制，我这里的字体单位是rem，详细内容请自行查询移动端的rem布局。

JavaScript：

/**
 * 控制点击顶部导航栏变换
 * @param tabNum
 */
function tabChange(tabNum){
    $(".nav-tap-item").eq(tabNum).addClass('nav-tap-item-on').siblings('.nav-tap-item').removeClass('nav-tap-item-on');
    $(".nav-body-item").eq(tabNum).show().siblings().hide();
}

image.gif

用的是jQuery库，eq选取同一类名的元素，为其添加类名，变为被选中的状态，siblings选取除当前选中的元素外的其他同名元素，并移除选中态的类名，下面用相同方法控制页面的显隐。

(移动端）简单的顶部导航栏

推荐阅读更多精彩内容