各种选项卡

来源：互联网发布：如何判断存在sql注入编辑：程序博客网时间：2024/04/25 18:34

这个合上那个打开

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript"  >function openP(_id){var select_id = parseInt(_id.replace("box",""));for (i=1;i<=4;i++){if (i==select_id){document.getElementById("box"+i).style.display = "block";}else{document.getElementById("box"+i).style.display = "none";}}}</script></head><body><div class="dalei"  onclick="openP('box1')">22222</div><div class="xiaolei" id="box1" style="display:none"><ul><li>>> 222</li><li>>> 222</li><li>>> 222</li></ul></div><div class="dalei"  onclick="openP('box2')">333</div><div class="xiaolei" id="box2" style="display:none"><ul><li>>> 222</li><li>>> 333</li><li>>> 333</li></ul></div></body></html>

好的选项卡

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>我的滑动门</title><style type="text/css">.nTab{float: left;width: 100%;margin: 0 auto;border-bottom:1px #AACCEE solid;background:#d5d5d5;background-position:left;background-repeat:repeat-y;margin-bottom:2px;}.nTab .TabTitle{clear: both;height: 22px;overflow: hidden;}.nTab .TabTitle ul{border:0;margin:0;padding:0;}.nTab .TabTitle li{float: left;width: 70px;cursor: pointer;padding-top: 4px;padding-right: 0px;padding-left: 0px;padding-bottom: 2px;list-style-type: none;font-size: 12px;text-align: center;margin: 0;}.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}.nTab .TabContent{width:auto;background:#fff;margin: 0px auto;padding:10px 0 0 0;border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;}.none {display:none;}</style><script type="text/javascript">function nTabs(thisObj,Num){if(thisObj.className == "active")return;var tabObj = thisObj.parentNode.id;var tabList = document.getElementById(tabObj).getElementsByTagName("li");for(i=0; i <tabList.length; i++){if (i == Num){   thisObj.className = "active";       document.getElementById(tabObj+"_Content"+i).style.display = "block";}else{   tabList[i].className = "normal";    document.getElementById(tabObj+"_Content"+i).style.display = "none";}} }</script></head><body><br /><br /><div align="center" style="padding-left:25px;"><!-- 选项卡0开始 --><div class="nTab">    <!-- 标题开始 -->    <div class="TabTitle">      <ul id="myTab0">        <li class="active" onmouseover="nTabs(this,0);">全部</li>        <li class="normal" onmouseover="nTabs(this,1);">日志</li>        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>        <li class="normal" onmouseover="nTabs(this,3);">相册</li>        <li class="normal" onmouseover="nTabs(this,4);">商城</li>        <li class="normal" onmouseover="nTabs(this,5);">社区</li>      </ul>    </div>    <!-- 内容开始 -->    <div class="TabContent">      <div id="myTab0_Content0"> 000 </div>      <div id="myTab0_Content1" class="none">111</div>      <div id="myTab0_Content2" class="none">222</div>      <div id="myTab0_Content3" class="none">333</div>      <div id="myTab0_Content4" class="none">444</div>      <div id="myTab0_Content5" class="none">555</div>    </div></div><!-- 选项卡0结束 --><!-- 选项卡1开始 --><div class="nTab" style=width:288px>    <!-- 标题开始 -->    <div class="TabTitle">      <ul id="myTab1">        <li class="active" onclick="nTabs(this,0);">aaa</li>        <li class="normal" onclick="nTabs(this,1);">bbb</li>        <li class="normal" onclick="nTabs(this,2);">ccc</li>        <li class="normal" onclick="nTabs(this,3);">单击</li>      </ul>    </div>    <!-- 内容开始 -->    <div class="TabContent">      <div id="myTab1_Content0"> 000 </div>      <div id="myTab1_Content1" class="none"> 111 </div>      <div id="myTab1_Content2" class="none"> 222 </div>      <div id="myTab1_Content3" class="none"> 333 </div>    </div></div><!-- 选项卡1结束 --></div></body></html>

滑动门图片也换的

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><img src="images/xia/topb1.gif"  onmousemove=topconb(1) id=imgb1 name=imgb1/><img src="images/xia/topb22.gif"  onmousemove=topconb(2) id=imgb2 name=imgb2/><DIV id=topb1 style="MARGIN: 0px 0px; WIDTH: auto; HEIGHT: auto; TEXT-ALIGN: center">1111111</DIV><DIV id=topb2   style=" display: none;MARGIN: 0px 0px; WIDTH: auto; HEIGHT: auto; TEXT-ALIGN: center">222222</DIV><SCRIPT language=javascript>var cnow=1;function topconb(ctnumb){var cnumb;var cobj1,cobj2cobj1=document.getElementById("topb1");cobj2=document.getElementById("topb2");num=ctnumb;  if(cnow!=cnumb)  {  cobj1.style.display="none";  cobj2.style.display="none";  document.getElementById("topb"+num).style.display="block";      document.getElementById("imgb1").src="images/xia/topb12.gif";  document.getElementById("imgb2").src="images/xia/topb22.gif";    document.getElementById("imgb"+num).src="images/xia/topb"+num+".gif";  now=num;  }}</SCRIPT>  </body></html>

Tips展开关闭问答代码

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><SCRIPT>function show(c_Str,imgg){if(document.all(c_Str).style.display=='none'){document.all(c_Str).style.display='block';document.all(imgg).src='http://www.lanrentuku.com/down/js/images/12493937251.gif'}else{document.all(c_Str).style.display='none';document.all(imgg).src='http://www.lanrentuku.com/down/js/images/12493937250.gif'}}</SCRIPT></head><body><p onclick='show("tip1","img1")'><IMG id=img1 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题一</p><p id=tip1  style="DISPLAY: none;">答案一</p><p onclick='show("tip2","img2")'><IMG   id=img2 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题二</p><p id=tip2  style="DISPLAY: none;">答案二</p><p onclick='show("tip3","img3")'><IMG  id=img3 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题三</p><p id=tip3  style="DISPLAY: none;">答案三</p></body></html>

阅读全文

0 0