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

转载于:https://www.cnblogs.com/1234cjq/p/5666436.html