您的位置：首页 > 理论基础 > 计算机网络

标签切换时从网络加载数据

2015-07-28 22:21 489 查看

load貌似有点问题，不能加载

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>标签切换</title>

<meta name="author" content="标题" />

<script src="jquery-1.8.0.min.js"></script>

<style type="text/css">

ul,li{
margin: 0;
padding: 0;
list-style: none;

}

li{
float: left;

margin-right: 5px;
border: 1px solid #dd22df;
background-color: #6e6e6e;
padding: 5px;
color: red;

}

.tabin{
background-color: #8e8e8e;
border: 1px solid #8e8e8e;
cursor: pointer;

}

#tabsecond li{
float:left;
background-color: #ffffff;
color: blue;
padding: 10px;
margin-right: 2px;

}

#tabsecond li.tabin{
background-color: #f2f6f8;
border: 1px solid #000000;
border-bottom: 0;
z-index: 100;/*设置优先级，两个div之间重叠的先后顺序，大值的在上 */
position: relative;/*相对布局*/

}

#contentsecond{
width: 500px;
height: 200px;
padding: 10px;
background-color: #f2f6f8;
clear: left;
border: 1px solid #000000;
top: -2px;/*上移一个像素*/
position: relative;/*相对布局，只有都设置为相对布局，才能覆盖掉边框*/

}

</style>

</head>

<body>

<ul id="tabsecond">
<li class="tabin">装载完整页面</li>
<li>装载部分页面</li>
<li>装载网络页面</li>

</ul>

<div id="contentsecond">
<div id="realcontent">

</div>

</div>

</body>

<script type="text/javascript">
$(document).ready(function(){

$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");

})

if(index==0){
$("#realcontent").load("index2.html");
}
else if(index==1){
$("#realcontent").load("index.jsp h2");/*加载 h2标签的数据*/
}
else if(index==2){
$("#realcontent").load("index.jsp");/*加载整个页面*/
}
})
});

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 标签数据加载

相关文章推荐

新的分享

章节导航