直播软件开发，手写导航栏切换页面
<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>
以上就是直播软件开发，手写导航栏切换页面的全部代码，更多内容请关注之后的文章
标签：软件开发,solid,strHtml,1px,音位,var,手写,border,页面 From： https://www.cnblogs.com/yunbaomengnan/p/16810216.html