请问有没有可以在浏览器下实现左右切换的TAB菜单 比如想滕讯那样的TAB菜单 能给个相似的代码最好 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--*{ margin:0; padding:0;}body{ font-size:12px;}ul,li{ list-style-type:none;}#tab{ width:500px; height:200px; margin:20px auto; overflow:hidden;}#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}#tab .tab_title .u{ width:465px; overflow:hidden; position:relative;}#tab .tab_title ul{ margin:0 5px; position:absolute; float:left; width:1392px;}#tab .tab_title div{ float:left;width:15px; height:20px; line-height:20px; cursor:pointer;}#tab .tab_title span.vright{top:0; right:5px; margin-left:2px;}#tab .tab_title span.vleft{top:0; left:0px; padding-left:5px;}#tab .tab_title li{ float:left; width:50px; height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:6px; border:1px #999999 solid; cursor:pointer;}#tab .tab_title li:hover{ background-color:#999999}#tab .tab_title li.selected{ background-color:#666666;}#tab .tab_content{ width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid;}#tab .tab_content div{ border:1px #999999 dotted; }#tab .tab_content div p{ line-height:1.5; text-indent:25px; color:#333333;}#tab .tab_content .none{ display:none;}#div1{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}#div2{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;} --></style><script language="javascript"> $(function(){ var index = 0; $(".tab_title ul li").click(function(){ index = $(".tab_title ul li").index(this); $(this).addClass("selected").siblings().removeClass("selected"); $(".tab_content div").eq(index).show().siblings().hide(); }); var i = 8; //定义每个面板显示8个菜单 var len = $(".u .scrol li").length; //获得LI元素的个数 var page = 1; var maxpage = Math.ceil(len/i); var scrollWidth = $(".u").width(); var divbox = "<div id='div1' >已经到最后一个面板了</div>"; $("body").append(divbox); $(".vright").click(function(e){ if(!$(".u .scrol").is(":animated")){ if(page == maxpage ){ $(".u .scrol").stop(); $("#div1").css({ "top": (e.pageY + 20) +"px", "left": (e.pageX + 20) +"px", "opacity": "0.9" }).stop(true,false).fadeIn(800).fadeOut(800); }else{ $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000); page++; } } }); $(".vleft").click(function(){ if(!$(".u .scrol").is(":animated")){ if(page == 1){ $(".u .scrol").stop(); }else{ $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000); page--; } } }); });</script></head><body><div id="tab"> <div class="tab_title"> <div class="vleft"><strong><<</strong></div> <div class="u"> <ul class="scrol"> <li class="selected">选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五</li> <li>选项六</li> <li>选项七</li> <li>选项八</li> <li>选项九</li> <li>选项十</li> <li>选项11</li> <li>选项12</li> <li>选项13</li> <li>选项14</li> <li>选项15</li> <li>选项16</li> <li>选项17</li> <li>选项18</li> <li>选项19</li> <li>选项20</li> <li>选项21</li> <li>选项22</li> <li>选项23</li> <li>选项24</li> </ul> </div> <div class="vright"><strong>>></strong></div> </div> <div class="tab_content"> <div> <p>1第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。</p> </div> <div class="none"> <p>2第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>3第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>4第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>5第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>6第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>7第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>8第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>9第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>10第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>11第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>12第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>13第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>14第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>15第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>16第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>17第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>18第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>19第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>20第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>21第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>22第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> <div class="none"> <p>23第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p> </div> <div class="none"> <p>24第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p> </div> </div></div><div id="js" align="center">刷新一下页面,点击左右箭头 可以滚动菜单 当滚动到最后一个面板时 在鼠标的右下角会提示已经到最后一个面板了。</div></body></html> <style> .act {text-align:center; color:blue; font-weight:bold; background:white; border:1px solid gray; border-bottom:0px;} .nom {text-align:center; color:gray; font-weight:normal; background:#EEEEEE; border:1px solid gray; cursor:pointer;} </style><TABLE id="tabM" width="500" border="0" style="border-collapse:collapse"><TR> <TD width="20px" style="border-bottom:1px solid gray"><INPUT id="btnL" TYPE="button" VALUE="<" ONCLICK="fun('l')" disabled></TD> <TD class="act" onclick="doClick(1)">aaa</TD> <TD class="nom" onclick="doClick(2)">bbb</TD> <TD class="nom" onclick="doClick(3)">ccc</TD> <TD width="20px" style="border-bottom:1px solid gray"><INPUT id="btnR" TYPE="button" VALUE=">" ONCLICK="fun('r')"></TD></TR></TABLE><div id="cont" style="width:500px; height:100px; border:1px solid gray; border-top:0px;">aaa是A生的</div> <SCRIPT LANGUAGE="JavaScript"> <!-- var indx = 1; var arr = ["aaa是A生的","bbb是2的","ccc是CC的儿子"]; function doClick(ind){ if(ind != indx) { indx = ind; var tabM = document.getElementById("tabM"); for (var i=1; i<tabM.rows[0].cells.length-1; i++) { if (i==indx){ tabM.rows[0].cells[i].className = "act"; document.getElementById("cont").innerHTML = arr[i-1]; } else tabM.rows[0].cells[i].className = "nom"; } var btnL = document.getElementById("btnL"); var btnR = document.getElementById("btnR"); if (indx==1) {btnL.disabled = true; btnR.disabled = false;} else if (indx==3) {btnL.disabled = false; btnR.disabled = true;} else {btnL.disabled = false; btnR.disabled = false;} } } function fun(type){ if (type=="l") doClick(indx-1); if (type=="r") doClick(indx+1); } //--> </SCRIPT> jQuery添加地图标注无法再iframe中运行 请问如何分割字符呢?jquery 字符串型为何是原始类型呀,理解不了,字符串不是固定大小呀?大小不固定,如何能成为原始类型? javascript 关于单引号的问题 新手问题,欢迎解答。 如何把某一个单元格内的图片替换成Flash 开源项目WebFlow已正式建立与发布!欢迎下载使用!!也请诸位版主试用! 刷新窗口时怎样让当前窗口始终显示页面的某一部分 求ie5.0关闭关闭窗体不提示代码? google map fusioncharts 的setdataurl 传参数
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ font-size:12px;}
ul,li{ list-style-type:none;}
#tab{ width:500px; height:200px; margin:20px auto; overflow:hidden;}
#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}
#tab .tab_title .u{ width:465px; overflow:hidden; position:relative;}
#tab .tab_title ul{ margin:0 5px; position:absolute; float:left; width:1392px;}
#tab .tab_title div{ float:left;width:15px; height:20px; line-height:20px; cursor:pointer;}
#tab .tab_title span.vright{top:0; right:5px; margin-left:2px;}
#tab .tab_title span.vleft{top:0; left:0px; padding-left:5px;}
#tab .tab_title li{ float:left; width:50px; height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:6px; border:1px #999999 solid; cursor:pointer;}
#tab .tab_title li:hover{ background-color:#999999}
#tab .tab_title li.selected{ background-color:#666666;}
#tab .tab_content{ width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid;}
#tab .tab_content div{ border:1px #999999 dotted; }
#tab .tab_content div p{ line-height:1.5; text-indent:25px; color:#333333;}
#tab .tab_content .none{ display:none;}
#div1{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}
#div2{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}
-->
</style>
<script language="javascript">
$(function(){
var index = 0;
$(".tab_title ul li").click(function(){
index = $(".tab_title ul li").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$(".tab_content div").eq(index).show().siblings().hide();
});
var i = 8; //定义每个面板显示8个菜单
var len = $(".u .scrol li").length; //获得LI元素的个数
var page = 1;
var maxpage = Math.ceil(len/i);
var scrollWidth = $(".u").width();
var divbox = "<div id='div1' >已经到最后一个面板了</div>";
$("body").append(divbox);
$(".vright").click(function(e){
if(!$(".u .scrol").is(":animated")){
if(page == maxpage ){
$(".u .scrol").stop();
$("#div1").css({
"top": (e.pageY + 20) +"px",
"left": (e.pageX + 20) +"px",
"opacity": "0.9"
}).stop(true,false).fadeIn(800).fadeOut(800);
}else{
$(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
page++;
}
}
});
$(".vleft").click(function(){
if(!$(".u .scrol").is(":animated")){
if(page == 1){
$(".u .scrol").stop();
}else{
$(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
page--;
}
}
});
});
</script>
</head>
<body>
<div id="tab">
<div class="tab_title">
<div class="vleft"><strong><<</strong></div>
<div class="u">
<ul class="scrol">
<li class="selected">选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
<li>选项五</li>
<li>选项六</li>
<li>选项七</li>
<li>选项八</li>
<li>选项九</li>
<li>选项十</li>
<li>选项11</li>
<li>选项12</li>
<li>选项13</li>
<li>选项14</li>
<li>选项15</li>
<li>选项16</li>
<li>选项17</li>
<li>选项18</li>
<li>选项19</li>
<li>选项20</li>
<li>选项21</li>
<li>选项22</li>
<li>选项23</li>
<li>选项24</li>
</ul>
</div>
<div class="vright"><strong>>></strong></div>
</div>
<div class="tab_content">
<div>
<p>1第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。</p>
</div>
<div class="none">
<p>2第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>3第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>4第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>5第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>6第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>7第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>8第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>9第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>10第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>11第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>12第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>13第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>14第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>15第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>16第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>17第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>18第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>19第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>20第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>21第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>22第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
<div class="none">
<p>23第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
</div>
<div class="none">
<p>24第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,免教生死作相思。</p>
</div>
</div>
</div>
<div id="js" align="center">刷新一下页面,点击左右箭头 可以滚动菜单 当滚动到最后一个面板时 在鼠标的右下角会提示已经到最后一个面板了。</div>
</body>
</html>
<style>
.act {text-align:center; color:blue; font-weight:bold; background:white; border:1px solid gray; border-bottom:0px;}
.nom {text-align:center; color:gray; font-weight:normal; background:#EEEEEE; border:1px solid gray; cursor:pointer;}
</style>
<TABLE id="tabM" width="500" border="0" style="border-collapse:collapse">
<TR>
<TD width="20px" style="border-bottom:1px solid gray"><INPUT id="btnL" TYPE="button" VALUE="<" ONCLICK="fun('l')" disabled></TD>
<TD class="act" onclick="doClick(1)">aaa</TD>
<TD class="nom" onclick="doClick(2)">bbb</TD>
<TD class="nom" onclick="doClick(3)">ccc</TD>
<TD width="20px" style="border-bottom:1px solid gray"><INPUT id="btnR" TYPE="button" VALUE=">" ONCLICK="fun('r')"></TD>
</TR>
</TABLE>
<div id="cont" style="width:500px; height:100px; border:1px solid gray; border-top:0px;">aaa是A生的</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var indx = 1;
var arr = ["aaa是A生的","bbb是2的","ccc是CC的儿子"];
function doClick(ind){
if(ind != indx) {
indx = ind;
var tabM = document.getElementById("tabM");
for (var i=1; i<tabM.rows[0].cells.length-1; i++)
{
if (i==indx){
tabM.rows[0].cells[i].className = "act";
document.getElementById("cont").innerHTML = arr[i-1];
}
else tabM.rows[0].cells[i].className = "nom";
}
var btnL = document.getElementById("btnL");
var btnR = document.getElementById("btnR");
if (indx==1) {btnL.disabled = true; btnR.disabled = false;}
else if (indx==3) {btnL.disabled = false; btnR.disabled = true;}
else {btnL.disabled = false; btnR.disabled = false;}
}
}
function fun(type){
if (type=="l") doClick(indx-1);
if (type=="r") doClick(indx+1);
} //-->
</SCRIPT>