直播软件开发，手写导航栏切换页面

直播软件开发，手写导航栏切换页面

 

<style>
    .container {
        width: 100%;
        letter-spacing: 1px;
    }
    .navBox{
        width: 1200px;
        margin: 0 auto;
        padding: 70px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
        border: 1px solid #ddd;
        display:none;
    }
    .navItem0 {
        display:block;
    }
    .left {
        float: left;
    }
    .toggleBox {
        width: 100%;
    }
    .toggleBox div {
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
        height: 47px;
        line-height: 47px;
        font-weight: bold;
    }
    .navItem {
        border-right: 1px solid #ddd;
        color: #666;
        border-bottom: 2px solid #ccc;
        background: linear-gradient(0deg, #FEFEFE, #FEFEFE);
        box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.15);
    }
    .activeCur {
        padding: 0 30px !important;
        color: #F61067;
        border: 1px solid #F61067;
        border-bottom: 2px solid #F61067;
    }
</style>
<div class="container">
    <div style="width:1340px;height:50px;margin:0 auto;">
        <div class="toggleBox left">
        </div>
    </div>
    <div class="containerBox">
    </div>
</div>
@Scripts.Render("http://libs.baidu.com/jquery/1.7.1/jquery.min.js")
<script>
    $(function () {
        var navList = ['音位习得评估记录表','声母音位习得评估分析表','音位对比能力评估记录表','音位对比能力评估分析表','声母音位对比和构音清晰度分析表'];
        var strHtml = '';
        var strContainer = '';
        $('.toggleBox').empty();
        $('.containerBox').empty();
        for (var i = 0; i < navList.length; i++) {
            strHtml += '<div curBox="navItem' + i + '"  class="left'
            if(i == 0){
             strHtml +=' activeCur '
            }
            strHtml += ' navItem">'
            strHtml += '<span>' + navList[i]+ '</span>'
            strHtml += '</div>'
            strContainer += '<div class="navBox navItem' + i + '">' + i + '</div>'
        }
        $('.toggleBox').append(strHtml)
        $('.containerBox').append(strContainer)
        $('.navItem').click(function () {
            $(this).siblings().removeClass('activeCur');
            $(this).addClass('activeCur');
            $('.' + $(this).attr('curBox')).show();
            $('.' + $(this).attr('curBox')).siblings().hide();
        })
    })
</script>

​

以上就是直播软件开发，手写导航栏切换页面的全部代码，更多内容请关注之后的文章