html页面
.box-body-1-3 li{
margin: 20px;
cursor: pointer; //实现鼠标放在上面是小手状态
}
点击列表
<div class="box-body-1-2" >
<ul class="box-body-1-3">
<li><a id="zonglan">总览</a></li>
<li><a id="shouying">收银</a></li>
<li><a id="tongji">统计</a></li>
<li><a id="yuyue">预约</a></li>
<li><a id="kehu">客户</a></li>
<li><a id="huiyuan">会员卡</a></li>
<li><a id="xiangmu">项目</a></li>
<li><a id="chanping">产品</a></li>
<li><a id="caiwu">财务</a></li>
</ul>
</div>
切换内容存放的div盒子
<div class="box-body-2">
<div class="box-body-2-1" id="show">
<img src="../../../Public/Home/dist/img/Zonglan.png">
</div>
</div>
---------------------------------------------------------------------------------------------------------------------------------
jquery部分 点击切换内容
<script type="text/javascript">
$(document).ready(function(){
$(‘#zonglan‘).click(function() {
var cjq1=$("<div><img src=‘../../../Public/Home/dist/img/Zonglan.png‘></div>");
$("#show").html(cjq1); //定位到存放内容的盒子
});
$(‘#shouying‘).click(function() {
var cjq=$("<div>收银</div>");
$("#show").html(cjq);
});
$(‘#tongji‘).click(function() {
var cjq=$("<div>统计</div>");
$("#show").html(cjq);
});
$(‘#yuyue‘).click(function() {
var cjq=$("<div>预约</div>");
$("#show").html(cjq);
});
$(‘#kehu‘).click(function() {
var cjq=$("<div>客户</div>");
$("#show").html(cjq);
});
$(‘#huiyuan‘).click(function() {
var cjq=$("<div>会员</div>");
$("#show").html(cjq);
});
$(‘#xiangmu‘).click(function() {
var cjq=$("<div>项目</div>");
$("#show").html(cjq);
});
$(‘#chanping‘).click(function() {
var cjq=$("<div>产品</div>");
$("#show").html(cjq);
});
$(‘#caiwu‘).click(function() {
var cjq=$("<div>财务</div>");
$("#show").html(cjq);
});
});
</script>