实现的效果如图,使用bootstrap需要至少三个文件
去bootstrap网上下载，然后使用这三个文件可以了
使用方式，通过标签，class命名来引用已经定制好的html样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一个页面</title>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/custom_index.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/custom_index.css">
</head>
<body>
<div class="head">
<ul class="list-group nav" >
<li><a href="#" class="list-group-item">货架</a></li>
<li><a href="#" class="list-group-item">商品</a></li>
<li><a href="#" class="list-group-item">促销和新品</a></li>
<li><a href="#" class="list-group-item">陈列图套发布</a></li>
<li><a href="#" class="list-group-item">配置查看用户</a></li>
<li><a href="#" class="list-group-item">发布陈列通知</a></li>
<li><a href="#" class="list-group-item">门店平面图</a></li>
<li><a href="#" class="list-group-item">陈列报表</a></li>
<li><a href="#" class="list-group-item">智能补货</a></li>
<li><a href="#" class="list-group-item">系统管理</a></li>
</ul>
</div>
<div class="side hide">
<li class="list-group-item">
<a href="#"><button type="button" class="btn btn-danger">10待添加</button></a>
<a href="#"><button type="button" class="btn btn-danger btn_s">9待添加</button></a>
</li>
<li class="list-group-item">
<a href="#"><button type="button" class="btn btn-success">9待添加</button></a>
<a href="#"><button type="button" class="btn btn-success btn_s">9待添加</button></a>
</li>
<li class="list-group-item">
<a href="#"><button type="button" class="btn btn-primary">9待添加</button></a>
<a href="#"><button type="button" class="btn btn-primary btn_s">9待添加</button></a>
</li>
<li class="list-group-item">
<a href="#"><button type="button" class="btn btn-warning">9待添加</button></a>
<a href="#"><button type="button" class="btn btn-warning btn_s">9待添加</button></a>
</li>
<li class="list-group-item">
<a href="#"><button type="button" class="btn btn-info">8待添加</button></a>
<a href="#"><button type="button" class="btn btn-info btn_s">8待添加</button></a>
</li>
</ul>
</div>
</body>
</html>
css样式
/*这是页面自定义css属性*/
.head{
282px;
height: 100%;
margin-top: 98px;
margin-left: 20px;
border-radius: 0;
}
.list-group-item:first-child {
border-radius: 0;
}
.side{
position: absolute;
left: 300px;
top: 98px;
height: 422px;
942px;
background-color:#337ab7; /*背景颜色控制*/
border: 2px solid red;
border-right: none;
}
.side li{
background-color:#337ab7;
border: none;
line-height: 50px;
padding-left: 200px;
}
.btn_s{
margin-left: 200px;
}
.btn {
180px;
}
自定义js
/*页面主要触发事件在这里执行*/
$(document).ready(function(){
var intervalID;
var curLi;
$(".nav li a").mouseover(function(){
curLi=$(this);/*获取操作对象*/
intervalID=setInterval(onMouseOver);
});
function onMouseOver(){
$(".active").css('border','1px solid #ddd')
curLi.css('border','2px solid red')
curLi.css('border-right','none')
$(".active").removeClass("active");
curLi.addClass("active");
$(".show").removeClass("show");
$(".side").eq($(".nav li a").index(curLi)).addClass("show");
}
$(".nav li a").click(function(){
clearInterval(intervalID);
$(".show").removeClass("show");
$(".side").eq($(".nav li a").index(curLi)).addClass("show");
$(".active").removeClass("active");
curLi.addClass("active");
});
$('.head li a:first').trigger('mouseover')
});