如何在div里面加载另一个html页面?
<div>页面一页面二页面三........</div><div>页面一</div>如上面:一进页面页面就显示的是页面一的内容,我点页面二就在下面的div里面显示页面二内...
<div> 页面一 页面二 页面三 ........ </div>
<div> 页面一 </div>
如上面: 一进页面页面就显示的是页面一的内容,我点页面二就在下面的div里面显示页面二内容,点3就显示3的内容.
注意:不使用iframe或frameset框架,用js或者jquery或ajax都可以.
网上找的都只有一段,对于菜鸟来说太难看懂了.求全面点的, 谢谢. 一共就5分全给了. 展开
<div> 页面一 </div>
如上面: 一进页面页面就显示的是页面一的内容,我点页面二就在下面的div里面显示页面二内容,点3就显示3的内容.
注意:不使用iframe或frameset框架,用js或者jquery或ajax都可以.
网上找的都只有一段,对于菜鸟来说太难看懂了.求全面点的, 谢谢. 一共就5分全给了. 展开
2个回答
展开全部
这个方式比较多
1、如果有现成的文本，包括json你可以用$("#id").html("page的内容")；这个要有编辑好的dom元素。
2、你是把包装集和事件分开的话，也可以用$("#id").load("page内容")；
3、你也可以用ajax,手写可以，用现有的库文件也行，在使用时，把压缩文件导入。一般是$.ajax(url,data...)这个用在异步操作较多些，要有前后台同时操作。
4、用a标签试一下，要是简单的用一些静态的，也可以用一下，我以前用过，具体怎么写我一下子想不起来，随后我帮你找下，现在我做一个银行的项目，时间不多。
*方法比较多， 建议你用试试，不是太难，希望对你有帮助
1、如果有现成的文本，包括json你可以用$("#id").html("page的内容")；这个要有编辑好的dom元素。
2、你是把包装集和事件分开的话，也可以用$("#id").load("page内容")；
3、你也可以用ajax,手写可以，用现有的库文件也行，在使用时，把压缩文件导入。一般是$.ajax(url,data...)这个用在异步操作较多些，要有前后台同时操作。
4、用a标签试一下，要是简单的用一些静态的，也可以用一下，我以前用过，具体怎么写我一下子想不起来，随后我帮你找下，现在我做一个银行的项目，时间不多。
*方法比较多， 建议你用试试，不是太难，希望对你有帮助
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我发现这个东西老是被用到，哈哈哈。。。初学者，代码写的不够简练，高手莫笑。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>鼠标移动显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="description" content=""/>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<style type="text/css">
.left{
border:1px solid black;
width:200px;
height:400px;
float:left;
}
.right{
border:1px solid black;
width:400px;
height:400px;
float:left;
background-color: #ccc;
margin:0px 10px;
position:relative;
}
.con span{
font-size:16px;
font-weight:700;
text-align: center;
padding:10px 0px;
border-radius:5px;
display: block;
margin:10px;
border:1px solid black;
}
.con span:first-child{
background-color: #ccc;
}
.con span:nth-child(2),
.con span:nth-child(3){
cursor:pointer;
}
.right .com{
width:400px;
height:400px;
position:absolute;
top:0px;
left:0px;
color:white;
}
.right .rone{
background-color: #880015;
}
.right .rtwo{
background-color: black;
}
.cli{
background-color: #A1C3FE;
}
.ind{
z-index: 1000;
}
</style>
</head>
<body>
<div class="con">
<div class="left">
<span>测试</span>
<span id="one" class="cli">列表1</span>
<span id="two">列表2</span>
</div>
<div class="right">
<div class="com rone ind" id="rone">列表1内容在这里显示</div>
<div class="com rtwo" id="rtwo">列表2内容在这里显示</div>
</div>
</div>
<script type="text/javascript">
$(document).addClass('cli').ready(function(){
$('#one').click(function(){
$('#two').removeClass('cli');
$('#one').addClass('cli');
$('#rtwo').removeClass('ind');
$('#rone').addClass('ind');
});
$('#two').click(function(){
$('#one').removeClass('cli');
$('#two').addClass('cli');
$('#rone').removeClass('ind');
$('#rtwo').addClass('ind');
});
});
</script>
</body>
</html>
记住下载个jquery-1.8.0.js，然后引入。
更多追问追答
追问
这个不行啊,我用复制到的是webStorm 编译器里,运行没效果
追答
这个和编译器没关系吧？你有没有下载jquery-1.8.0.js并且引入了？算了。。。我附加一个给你！记得改路径。。。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
