多点调用的 选项卡
来源：互联网 发布：数控980车床编程实例 编辑：程序博客网 时间：2024/04/30 09:19
<html>
<head>
<style>
body
{
text-align:center;
}
.tab
{
width:432px;
height:208px;
margin:0 auto;
overflow:hidden;
border:1px solid #cccccc;
}
.menu,.menu li
{
margin:0;
padding:0;
height:24px;
list-style:none;
overflow:hidden;
text-align:center;
}
.menu
{
border-bottom:1px solid #cccccc;
}
.menu .default
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
font-weight:bold;
color:#FFFFFF;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
width:76px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('bg.jpg') no-repeat;
color:#FF0000;
font-weight:normal;
text-align:right
}
.con
{
width:422px;
height:184px;
margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
document.getElementById(ids).getElementsByTagName('li')[0].className='active';
document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
// document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果
}
function onmousOver(ids,cons,dis){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
if (obj.className=='active'||obj.id=='more')return;
var o=document.getElementById(ids).getElementsByTagName('li');
for (var i=0;i<=o.length-1;i++){o[i].className='default'}
obj.className='active';
if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>
<!--#1-->
<div class='tab'>
<ul id='nav1' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="l5" class='default'>第5新闻</li>
</ul>
<div class='con' id='con1'>
</div>
</div>
<div style="display:none">
<div id="div1_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div1_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div1_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
<div id="div1_l4">
<span>当鼠标放上去时就变<a href="http://www.51qqdm.cn">，</a>而不用点了！</span>
</div>
<div id="div1_l5">
<span>增加了！</span>
</div>
</div>
<script>
init('nav1','con1',"div1_");
</script>
<!--#2-->
<div class='tab'>
<ul id='nav2' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="more"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con2'>
</div>
</div>
<div style="display:none">
<div id="div2_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div2_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div2_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
<div id="div2_l4">
<span>当鼠标放上去时就变<a href="http://www.51qqdm.cn">，</a>而不用点了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_");
</script>
<!--#3-->
<div class='tab'>
<ul id='nav3' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con3'>
</div>
</div>
<div style="display:none">
<div id="div3_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div3_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div3_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav3','con3',"div3_");
</script>
</body>
</html>
<head>
<style>
body
{
text-align:center;
}
.tab
{
width:432px;
height:208px;
margin:0 auto;
overflow:hidden;
border:1px solid #cccccc;
}
.menu,.menu li
{
margin:0;
padding:0;
height:24px;
list-style:none;
overflow:hidden;
text-align:center;
}
.menu
{
border-bottom:1px solid #cccccc;
}
.menu .default
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
font-weight:bold;
color:#FFFFFF;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
width:76px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('bg.jpg') no-repeat;
color:#FF0000;
font-weight:normal;
text-align:right
}
.con
{
width:422px;
height:184px;
margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
document.getElementById(ids).getElementsByTagName('li')[0].className='active';
document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
// document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果
}
function onmousOver(ids,cons,dis){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
if (obj.className=='active'||obj.id=='more')return;
var o=document.getElementById(ids).getElementsByTagName('li');
for (var i=0;i<=o.length-1;i++){o[i].className='default'}
obj.className='active';
if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>
<!--#1-->
<div class='tab'>
<ul id='nav1' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="l5" class='default'>第5新闻</li>
</ul>
<div class='con' id='con1'>
</div>
</div>
<div style="display:none">
<div id="div1_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div1_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div1_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
<div id="div1_l4">
<span>当鼠标放上去时就变<a href="http://www.51qqdm.cn">，</a>而不用点了！</span>
</div>
<div id="div1_l5">
<span>增加了！</span>
</div>
</div>
<script>
init('nav1','con1',"div1_");
</script>
<!--#2-->
<div class='tab'>
<ul id='nav2' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="more"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con2'>
</div>
</div>
<div style="display:none">
<div id="div2_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div2_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div2_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
<div id="div2_l4">
<span>当鼠标放上去时就变<a href="http://www.51qqdm.cn">，</a>而不用点了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_");
</script>
<!--#3-->
<div class='tab'>
<ul id='nav3' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con3'>
</div>
</div>
<div style="display:none">
<div id="div3_l1">
<span>要做一个选项卡<a href="http://www.51qqdm.cn">，</a>在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div3_l2">
<span>所以特来问一下高手们<a href="http://www.51qqdm.cn">，</a>请大家帮帮忙！</span>
</div>
<div id="div3_l3">
<span>找了几个来改<a href="http://www.51qqdm.cn">，</a>都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav3','con3',"div3_");
</script>
</body>
</html>
- 多点调用的 选项卡
- 选项卡-多点调用-特效
- 代理的多点传送
- Unity3D的多点触摸
- android 的 多点
- 不错的选项卡
- 选项卡的操作
- jquery的选项卡
- js的选项卡
- 简单的选项卡
- 选项卡的实现
- 竖排的选项卡
- 选项卡的实现
- 选项卡的实现
- 选项卡的制作
- reactNative的选项卡
- js的选项卡
- 简单的选项卡
- 联通的G网和C网分别是什么意思?
- 哈佛大学图书馆上的警句
- What is CEO and others ?
- 动态CSS，换肤技术
- 彩信DIy JS代码
- 多点调用的 选项卡
- 如何战胜孤独感
- 程序员四大忌，你做到了吗？
- Decorator
- X-Ways.WinHex.v14.7.SR-1.Incl.Keymaker-ZWT
- shtml教程
- 只有先保护好自己，才能保护好爱你的人
- 站点meta标签常用写法介绍
- 常用正则表达式大全！（例如：匹配中文、匹配html）
