竖排的选项卡

最新推荐文章于 2021-06-19 05:34:32 发布

-布谷鸟-

最新推荐文章于 2021-06-19 05:34:32 发布

阅读量2.6k

点赞数 1

分类专栏： javascript 文章标签： JavaScript html5

本文链接：https://blog.csdn.net/cuckoo1/article/details/50780409

版权

javascript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

说明：
1,鼠标在左边的菜单上，右边的显示框内就会显示相应的内容；
2,左边的菜单项有九个项，上下滑动鼠标可以进行选择；
3,如果右边的显示内容上下超过显示区域，则可以上下滑动鼠标进行查看(如条目3)；
4,如果右边的显示内容左右超过显示区域，则可以用SHIFT+上下滑动鼠标进行查看(如条目4)。
5,要重点关注一下style内容中166,94两个数字的由来（有注释）.

谷来成, 2016.3.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竖排的选项卡</title>
<style type="text/css">
body{font-size:12px;font-family:Arial;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#A9A9A9;}
.newso {float:left;z-index:110;width:100px;height:166px;overflow:hidden;
border-top:1px solid #A9A9A9;
border-left:1px solid #A9A9A9;
border-bottom:1px solid #A9A9A9;
}
/*
166 = 160+3x2
160 main' height
3 main's padding(top & bottom)
*/
.news {float:left;z-index:100;width:120px;height:166px;margin:0px;overflow-x:hidden;overflow-y:auto;}
.news ul{list-style:none;padding:0px;margin:0px;}
.news ul li{border-top:0px solid #A9A9A9;border-left:0px solid #A9A9A9;border-right:1px solid #A9A9A9;border-bottom:1px solid #A9A9A9;height:21px;width:94px;margin-bottom:0px;padding-top:3px;text-align:left;cursor:pointer;vertical-align:middle;padding-left:5px;padding-bottom:3px;background:#EEEEFF;}
/*
94 = 100 - 3x2
100 newso's width
3 li's padding-top & padding-bottom
*/
.news #tb_11{border-top:0px solid #A9A9A9;}
.news #tb_19{border-bottom:0px solid #A9A9A9;}
.news ul li.on{background:#FFEEEE;border-right:2px solid #FFEEEE;}
.main{
float:left;
z-index:50;
border-left:0px solid #A9A9A9;
border-top:1px solid #A9A9A9;
border-right:1px solid #A9A9A9;
border-bottom:1px solid #A9A9A9;
width:500px;
height:160px;
padding:3px;
margin-left:0px;
overflow:auto;
background:#FFEEEE;}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(m,n,counter){
for(var i=1;i<=counter;i++){
g('tb_'+m+i).className='';
g('tbc_'+m+i).className='undis';
}
g('tbc_'+m+n).className='dis';
g('tb_'+m+n).className='on';
}
</script>
</head>
<body>
<div class="newso">
<div class="news">
<ul>
<li class="on" id="tb_11" οnmοuseοver="HoverLi(1,1,9);">1乐视超级汽车</li>
<li class="" id="tb_12" οnmοuseοver="HoverLi(1,2,9);">2链家的善与恶</li>
<li class="" id="tb_13" οnmοuseοver="HoverLi(1,3,9);">3压力屏的春天</li>
<li class="" id="tb_14" οnmοuseοver="HoverLi(1,4,9);">4考拉FM直播 </li>
<li class="" id="tb_15" οnmοuseοver="HoverLi(1,5,9);">5发展婚恋O2O </li>
<li class="" id="tb_16" οnmοuseοver="HoverLi(1,6,9);">6在职者兼职多</li>
<li class="" id="tb_17" οnmοuseοver="HoverLi(1,7,9);">7爱奇艺付费看</li>
<li class="" id="tb_18" οnmοuseοver="HoverLi(1,8,9);">8淘当铺生态圈</li>
<li class="" id="tb_19" οnmοuseοver="HoverLi(1,9,9);">9雷军登杂志封面</li>
</ul>
</div>
</div>
<div class="main">
<div class="dis" id="tbc_11">