主界面主要代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery-3.2.1(1).js"></script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="" class="navbar-brand" style="padding: 5px 15px;">
<img src="img/logo.png" alt="轻工云音乐系统" width="229px" height="40px"/>
</a>
</div>
</div>
</div>
<!-- 菜单与内容 -->
<div class="container-fluid">
<!-- 菜单 -->
<div class="col-md-2 col-sm-2" id="menu">
<div class="list-group">
<a href="music_add.html" class="list-group-item" target="content"><span class="glyphicon glyphicon-cloud-upload"></span> 音乐上传</a>
<a href="music-list.html" class="list-group-item" target="content"><span class="glyphicon glyphicon-list"></span> 音乐列表</a>
<a href="user_magnager.html" class="list-group-item" target="content"><span class="glyphicon glyphicon-user"></span> 用户管理</a>
<a href="update_pwd.html" class="list-group-item" target="content"><span class="glyphicon glyphicon-pencil"></span> 密码修改</a>
<a href="login.html" class="list-group-item"><span class="glyphicon glyphicon-log-out"></span> 系统退出</a>
</div>
</div>
<!-- 内容 -->
<div class="col-md-10 col-sm-10" id="content">
<iframe name="content" src="music_add.html"></iframe>
</div>
<p class="text-center" style="font-size: 16px;">©湖北轻工</p>
</div>
<script>
//完成菜单切换功能
$(function(){
//选中所有的菜单项,并绑定点击事件
$('#menu>div>a').on('click',function(){
//去除所有菜单项的激活效果
$('#menu>div>a').removeClass('active');
//为当前点击的菜单项添加激活效果
$(this).addClass('active');
})
})
</script>
</body>
</html>
音乐上传的页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="assert/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<!-- 路径导航 -->
<ol class="breadcrumb">
<li><a href="">音乐上传</a></li>
<