tag纵向切换

2010 - 7 - 22 作者 : 石家庄SEO 分类 :DIV-CSS

记录 一些 滚 各种滚都有

https://www.seosjz.com/code/untitled-1.html

https://www.seosjz.com/code/untitled-2.html

https://www.seosjz.com/code/untitled-3.html

https://www.seosjz.com/code/untitled-4.html

https://www.seosjz.com/code/untitled-5.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">
@charset "gb2312";
/* CSS Document */
#tabs3 { width:468px; height:160px; }
.menu3box { height:66px; width:105px; float:left; margin-top:90px; position:absolute; z-index:1; }
#menu3 { width:105px; margin:0; padding:0; }
#menu3 li { background:#AFB9BF; width:104px; text-align:center; line-height:21px; height:31px; border-left:1px solid #E1E6E9; border-top:1px solid #E1E6E9; border-bottom:1px solid #E1E6E9; vertical-align: middle; list-style-type: none; margin-top:2px; }
#menu3 li.hover { background-color:#fff; border-left:1px solid #E1E6E9; border-top:1px solid #E1E6E9; border-bottom:1px solid #E1E6E9; vertical-align: bottom; width:104px; margin-top:2px; height:31px; }
.main3box { position:relative; overflow:hidden; height:138px; width:342px;border-left:1px solid #E1E6E9; border-right:1px solid #E1E6E9; border-top:1px solid #E1E6E9; border-bottom:1px solid #E1E6E9; float:right; padding:10px 10px;}
#main3 ul { display: none; margin:0; padding:0; }
#main3 ul.block { display: block; margin:0; padding:0; }
</style>
</head>

<body><script>
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){tli[i].className=i==n?"hover":"";mli[i].style.display=i==n?"block":"none";}}
</script>

<div id="tabs3">
       <div class="menu3box">
        <ul id="menu3">
         <li class="hover" onmouseover="setTab(3,0)"><a href="#">新闻</a></li>
         <li onmouseover="setTab(3,1)"><a href="#">评论</a></li>
        </ul>
       </div>
       <div class="main3box">
        <div class="main" id="main3">
         <ul class="block">
          <li>新闻列表</li>
         </ul>
         <ul>
          <li>评论列表</li>
         </ul>
         <ul>
          <li>技术列表</li>
         </ul>
        </div>
       </div>
      </div>
</body>
</html>
 

9520 人围观 / 1 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18