jquery实现页面内部的内容切换

html页面

.box-body-1-3 li{

margin: 20px;

cursor: pointer; //实现鼠标放在上面是小手状态

}

点击列表

<div class="box-body-1-2" >

<ul class="box-body-1-3">

<li><a >财务</a></li>

</ul>

</div>

切换内容存放的div盒子

<div class="box-body-2">

<div class="box-body-2-1" >

</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>