php在一个页面中，比如是一个菜单，点击左侧的菜单，就会发送一个后台请求的链接，查询出来我需要的东西
然后将内容在右侧显示出来如果我点击了第二个菜单，那么就还是在这个区域上显示，类似于刷新的效果。不知道前台js如何做？后台我用的thinkphp，又如何做到跳转？还回到此页...
然后将内容在右侧显示出来
如果我点击了第二个菜单，那么就还是在这个区域上显示，类似于刷新的效果。
不知道前台js如何做？后台我用的thinkphp，又如何做到跳转？还回到此页面上？ 展开
如果我点击了第二个菜单，那么就还是在这个区域上显示，类似于刷新的效果。
不知道前台js如何做？后台我用的thinkphp，又如何做到跳转？还回到此页面上？ 展开
2个回答
展开全部
如果懂得 ajax 技术的话，原理其实很简单；前台点一次左侧的菜单就做一次 ajax 请求，然后将后台返回的数据赋值显示在右侧，而右侧有多种方式来显示返回的结果，这里我说一种通俗易懂的方法。在这里，我假设左侧是一个 <div id="left">，右侧是一个 <div id="right">，然后模拟一种情况，具体代码如下：
<!-- 前台 -->
<!-- 记得导入jquery 插件 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<style type="text/css">
.contain{margin: 0 auto; width: 900px;}
.clear:after{content: ".";visibility: hidden;display: block;height: 0px; clear: both;}
#left,#right{display: block; float: left; border: 1px solid #000000;}
#left{width: 200px; line-height: 30px; text-align: center;}
#left div{margin: 2px auto; border: 1px solid blue; cursor: pointer;}
#right{width: 650px; height: 200px; background: #ffffff; margin-left: 20px;}
</style>
<body>
<div class="contain clear">
<div id="left" class="clear">
<div>111111111111111111</div>
<div>222222222222222222</div>
<div>233333333333333333</div>
<div>344444444444444444</div>
<div>555555555555555555</div>
<div>666666666666666666</div>
</div>
<div id="right" class="clear">
<!-- 用来显示后台返回的结果 -->
</div>
<!-- 首先导入jquery插件 -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#left div").click(function(){
/*当鼠标点击 left 中的div 是，获取当前点击的div 中的内容*/
var content = $(this).text();
//alert(content);
/*取得当前值之后做 ajax 提交*/
$.ajax({
url:'index.php', //假设值传给同目录下的index.php 页面
type:'post', //post 方式提交
data:'content='+content, //要传的值
success:function(txt){ //提交完后，后台的返回值即为 txt
$("#right").text(txt);
}
});
});
});
</script>
</div>
</body>
</html>
<!-- 后台 -->
<?php
header("content-type:text/html;charset=utf-8");
$content = $_POST['content'];
// echo "前台传过来的值是：$content,后台 echo 输入的内容将全部返回到前台。";
echo $content;
?>
<!-- 前台 -->
<!-- 记得导入jquery 插件 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<style type="text/css">
.contain{margin: 0 auto; width: 900px;}
.clear:after{content: ".";visibility: hidden;display: block;height: 0px; clear: both;}
#left,#right{display: block; float: left; border: 1px solid #000000;}
#left{width: 200px; line-height: 30px; text-align: center;}
#left div{margin: 2px auto; border: 1px solid blue; cursor: pointer;}
#right{width: 650px; height: 200px; background: #ffffff; margin-left: 20px;}
</style>
<body>
<div class="contain clear">
<div id="left" class="clear">
<div>111111111111111111</div>
<div>222222222222222222</div>
<div>233333333333333333</div>
<div>344444444444444444</div>
<div>555555555555555555</div>
<div>666666666666666666</div>
</div>
<div id="right" class="clear">
<!-- 用来显示后台返回的结果 -->
</div>
<!-- 首先导入jquery插件 -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#left div").click(function(){
/*当鼠标点击 left 中的div 是，获取当前点击的div 中的内容*/
var content = $(this).text();
//alert(content);
/*取得当前值之后做 ajax 提交*/
$.ajax({
url:'index.php', //假设值传给同目录下的index.php 页面
type:'post', //post 方式提交
data:'content='+content, //要传的值
success:function(txt){ //提交完后，后台的返回值即为 txt
$("#right").text(txt);
}
});
});
});
</script>
</div>
</body>
</html>
<!-- 后台 -->
<?php
header("content-type:text/html;charset=utf-8");
$content = $_POST['content'];
// echo "前台传过来的值是：$content,后台 echo 输入的内容将全部返回到前台。";
echo $content;
?>
追问
我就加分到200
我第一次用前台模板做，我的左侧的菜单栏也是活的，从数据库查的。但是比如111和222，它们的css样式不同，我也不知道如何控制，让菜单栏来显示，我还要走一个分页的效果。
我也不知道该如何来做左边这个菜单栏，不同行之间用到的css不同，不知道如何弄？？
这个菜单栏是应该用a标签用超链接做，还是就是一个普通的div?这样我也可以用它写好的效果，但是如何控制后台数据在前台的生成呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以是dwz的框架去实现这种效果
http://j-ui.com/这他的效果！
http://j-ui.com/这他的效果！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
