87,902
社区成员
发帖
与我相关
我的任务
分享
<div class="list">
<table class="table">
<tbody>
<tr><td>11</td></tr>
</tbody>
</table>
<table class="table1">
<tbody>
<tr><td>22</td></tr>
</tbody>
</table>
<table class="table2">
<tbody>
<tr><td>33</td></tr>
</tbody>
</table>
<table class="table3">
<tbody>
<tr><td>44</td></tr>
</tbody>
</table>
</div>
<html>
<head>
<script src="js/jquery-2.1.1.js"></script>
<style>
*{margin:0px;padding:0px;list-style: none;}
#container{border:#E8E8E8 1px solid;width:495px;margin:50px auto 0 auto;height:400px;}
#header{height:28px;}
#header ul li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;}
#header ul .liShow{background:#AFAFAF;color:#E6E6E6;}
.add{background:#FFFFFF;color:#1C94C4;}
</style>
<script>
function setTab(t){
var length=$(".body").length;
for(i=1;i<=length;i++)
{
var li=document.getElementById("header"+i);
var div=document.getElementById("body_header"+i);
if(i==t)
{
li.className="add";
div.style.display="block";
}else
{
li.className="liShow";
div.style.display="none";
};
};
};
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","book.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.reponseXML;
</script>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li id="header1" onclick="setTab(1)" class="add">今日热点</li>
<li id="header2" onclick="setTab(2)" class="liShow">国际新闻</li>
<li id="header3" onclick="setTab(3)" class="liShow">城市论坛</li>
<li id="header4" onclick="setTab(4)" class="liShow">科技专区</li>
<li id="header5" onclick="setTab(5)" class="liShow">灌水专区</li>
</ul>
</div>
<div id="body">
<div id="body_header1" class="body" style="display: block;">阿根廷2-1胜波黑!梅西终进球!</div>
<div id="body_header2" class="body" style="display: none;">迪拜拟造全球最高大厦</div>
<div id="body_header3" class="body" style="display: none;">工人难挡酷暑街头昏迷</div>
<div id="body_header4" class="body" style="display: none;">苹果全球开发者大会发布swift语言</div>
<div id="body_header5" class="body" style="display: none;">水水水</div>
</div>
</div>
</body>
</html>
$(function () {
$("#dv table:not(.table)").hide();
$("table").each(function (i) {
var $this = $(this);
$this.click(function(){
if(i == $("table").length-1){
$this.hide();
$("table:first").show();
}else{
$this.hide().next().show();
}
});
});
});
<div class="list" id="dv">
<table class="table">
<tbody>
<tr><td>11</td></tr>
</tbody>
</table>
<table class="table1">
<tbody>
<tr><td>22</td></tr>
</tbody>
</table>
<table class="table2">
<tbody>
<tr><td>33</td></tr>
</tbody>
</table>
<table class="table3">
<tbody>
<tr><td>44</td></tr>
</tbody>
</table>
</div>
<script>
window.onload = function () {
var current = 0, dv = document.getElementById('dv'), tbs = document.getElementsByTagName('table'), l = tbs.length;
for (var i = 1; i < l; i++) tbs[i].style.display = 'none'; //隐藏其他table
dv.onclick = function () {
tbs[current].style.display = 'none';
current++;
if (current >= l) current = 0;
tbs[current].style.display = '';
}
}
</script>