如何在div里面加载另一个html页面?

<div> 页面一页面二页面三 ........ </div>
<div> 页面一 </div>
如上面: 一进页面页面就显示的是页面一的内容,我点页面二就在下面的div里面显示页面二内容,点3就显示3的内容.
注意:不使用iframe或frameset框架,用js或者jquery或ajax都可以.
网上找的都只有一段,对于菜鸟来说太难看懂了.求全面点的, 谢谢. 一共就5分全给了.

举报该文章

相关建议 2015-05-20

这个方式比较多
1、如果有现成的文本，包括json你可以用$("#id").html("page的内容")；这个要有编辑好的dom元素。
2、你是把包装集和事件分开的话，也可以用$("#id").load("page内容")；
3、你也可以用ajax,手写可以，用现有的库文件也行，在使用时，把压缩文件导入。一般是$.ajax(url,data...)这个用在异步操作较多些，要有前后台同时操作。
4、用a标签试一下，要是简单的用一些静态的，也可以用一下，我以前用过，具体怎么写我一下子想不起来，随后我帮你找下，现在我做一个银行的项目，时间不多。
*方法比较多，建议你用试试，不是太难，希望对你有帮助

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/m7sqm2psfqf2mvfpfm.html

其他看法

第1个回答推荐于2016-08-23

我发现这个东西老是被用到，哈哈哈。。。初学者，代码写的不够简练，高手莫笑。

<!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并且引入了？算了。。。我附加一个给你！记得改路径。。。

追问

引入了,我引入的是1.8.3的版本

本回答被提问者采纳

相似回答

大家正在搜