<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul{
list-style-type:none;
padding:0;
}
#tab li{
float:left;
width:100px;
height:30px;
line-height:30px;
font-size:22px;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
}
.tab-info{
display:none;
width:400px;
border-width:0px 1px 1px 1px;
border-color:red;
border-style:solid;
}
</style>
<script type="text/javascript">
var tabIndex=["1","2","3","4"];
function tab(index){
for(var i=1;1<=tabIndex.length;i++){
if(index==i){
//操作目录边框
var tagetTab=document.getElementById("tab"+index);
tagetTab.style.borderTop="1px solid red";
tagetTab.style.borderRight="1px solid red";
tagetTab.style.borderBottom="0px solid red";
tagetTab.style.borderLeft="1px solid red";
//操作主体空间
var targetTabInfo=document.getElementById("tab-info-"+index);
targetTabInfo.style.display="block";
}else{
var tempTab=document.getElementById("tab"+i);
tempTab.style.borderTop="0px solid red";
tempTab.style.borderRight="0px solid red";
tempTab.style.borderBottom="1px solid red";
tempTab.style.borderLeft="0px solid red";
var tempTabInfo=document.getElementById("tab-info-"+i);
tempTabInfo.style.display="none";
}
}
}
</script>
</head>
<body οnlοad="tab(2)">
<div id="tab">
<ul>
<li id="tab1" οnclick="tab(1)">语文</li>
<li id="tab2" οnclick="tab(2)">数学</li>
<li id="tab3" οnclick="tab(3)">英语</li>
<li id="tab4" οnclick="tab(4)">物理</li>
</ul>
</div>
<div id="tab-info-1" class="tab-info"> 人生百味，情最浓，人生繁华，淡最真，人生一路，一步有一步的风景，一程有一程的感悟，最终你是我的尘路，我是你的归途。
爱，谁都能用嘴随便说出，可是真正懂爱的人有几个？其实越是一个天天把爱挂在嘴边的人，越是一个不懂爱之人。</div>
<div id="tab-info-2" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
<div id="tab-info-3" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
<div id="tab-info-4" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul{
list-style-type:none;
padding:0;
}
#tab li{
float:left;
width:100px;
height:30px;
line-height:30px;
font-size:22px;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
}
.tab-info{
display:none;
width:400px;
border-width:0px 1px 1px 1px;
border-color:red;
border-style:solid;
}
</style>
<script type="text/javascript">
var tabIndex=["1","2","3","4"];
function tab(index){
for(var i=1;1<=tabIndex.length;i++){
if(index==i){
//操作目录边框
var tagetTab=document.getElementById("tab"+index);
tagetTab.style.borderTop="1px solid red";
tagetTab.style.borderRight="1px solid red";
tagetTab.style.borderBottom="0px solid red";
tagetTab.style.borderLeft="1px solid red";
//操作主体空间
var targetTabInfo=document.getElementById("tab-info-"+index);
targetTabInfo.style.display="block";
}else{
var tempTab=document.getElementById("tab"+i);
tempTab.style.borderTop="0px solid red";
tempTab.style.borderRight="0px solid red";
tempTab.style.borderBottom="1px solid red";
tempTab.style.borderLeft="0px solid red";
var tempTabInfo=document.getElementById("tab-info-"+i);
tempTabInfo.style.display="none";
}
}
}
</script>
</head>
<body οnlοad="tab(2)">
<div id="tab">
<ul>
<li id="tab1" οnclick="tab(1)">语文</li>
<li id="tab2" οnclick="tab(2)">数学</li>
<li id="tab3" οnclick="tab(3)">英语</li>
<li id="tab4" οnclick="tab(4)">物理</li>
</ul>
</div>
<div id="tab-info-1" class="tab-info"> 人生百味，情最浓，人生繁华，淡最真，人生一路，一步有一步的风景，一程有一程的感悟，最终你是我的尘路，我是你的归途。
爱，谁都能用嘴随便说出，可是真正懂爱的人有几个？其实越是一个天天把爱挂在嘴边的人，越是一个不懂爱之人。</div>
<div id="tab-info-2" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
<div id="tab-info-3" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
<div id="tab-info-4" class="tab-info"> 爱，不是眼泪和伤害，不是勉强和同情，更不是绳索和枷锁。爱是心底感情的自然流露，是心甘情愿的付出。时间蹉跎，爱情需要保鲜，更需要经营。
别为难自己，情在珍惜，人去随缘。落霞虽美，却是暮日离歌，昙花虽艳，终是刹那一现。红尘，多情未必真情人，无心也许伤心客。</div>
</body>
</html>
69
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
