| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 466 人关注过本帖
标题:求大神解释下面的scipt语句 谢谢 html代码可以不用管 谢谢
只看楼主 加入收藏
wccwin
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2012-11-25
结帖率:0
收藏
已结贴  问题点数:20 回复次数:2 
求大神解释下面的scipt语句 谢谢 html代码可以不用管 谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.  
<html xmlns="http://www.  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>滑动门</title>  
<style media="screen" type="text/css">  
<!--  
*{font-size:12px;}  
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}  
UL{list-style-type:none; margin:0px;}  
/* 标准盒模型 */  
.ttl{height:18px;}  
.ctt{
 height:auto;
 padding:6px;
 float: right;
 width: 680px;
}  
.w936{
 width:288px;
 border:1px solid skyblue;
 margin-top: 2px;
 margin-right: 0;
 margin-bottom: 2px;
 margin-left: 0;
 float: left;
}
 
 
/* TAB 切换效果 */  
.tb_{background-color: #E6F2FF; background-image: url('http://www.'); background-repeat: repeat-x;}  
.tb_ ul{height:24px;}  
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 288px;cursor:pointer;}  
.normaltab    { background-repeat: no-repeat; color:#1F3A87 ;}  
.hovertab     { background-repeat: no-repeat; color:#1F3A87; font-weight:bold }  
.dis{display:block;}  
.undis{display:none;}
#Layer1 {
 position:absolute;
 left:232px;
 top:82px;
 width:145px;
 height:85px;
 z-index:1;
}
#aaaaaa {
 height: 100px;
 width: 100px;
 position: absolute;
 left: 393px;
 top: 16px;
}
 
-->  
</style>  
<script type="text/javascript" language="javascript">  
<!--  
function g(o){return document.getElementById(o);}  
function HoverLi(n){  
//如果有N个标签,就将i<=N;  
for(var i=1;i<=6;i++){
 g('tb_'+i).className='normaltab';
 g('tbc_0'+i).className='undis';
 }
 g('tbc_0'+n).className='dis';
 g('tb_'+n).className='hovertab';  
}  
//-->  
</script>  
</head>
 
<body>
 
<div id="aaaaaa"><img src="skin-bg.gif" width="213" height="105" /></div>
<div class="w936">  
     <div id="tb_" class="tb_">  
             <ul>  
                 <li id="tb_1" class="hovertab" onclick ="xgz:HoverLi(1);">网上房展会</li>  
                 <li id="tb_2" class="normaltab" onclick="xgz:HoverLi(2);">本月开盘</li>  
                 <li id="tb_3" class="normaltab" onclick="xgz:HoverLi(3);">知名开发商</li>  
                 <li id="tb_4" class="normaltab" onclick="xgz:HoverLi(4);">栏目导航</li>  
                 <li id="tb_5" class="normaltab" onclick="xgz:HoverLi(5);">哈哈哈哈</li>  
                 <li id="tb_6" class="normaltab" onclick="xgz:HoverLi(6);">Q小鸽子</li>  
             </ul>  
     </div>
 
</div> <div class="ctt">  
         <div class="dis" id="tbc_01">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div>  
         <div class="undis" id="tbc_02">内容2</div>  
         <div class="undis" id="tbc_03">内容3</div>  
         <div class="undis" id="tbc_04">内容4</div>  
         <div class="undis" id="tbc_05">内容5</div>  
         <div class="undis" id="tbc_06">内容6 [Q小鸽子]</div>  
     </div>  
</body>  
</html>
搜索更多相关主题的帖子: html 滑动门 content PUBLIC center 
2012-11-25 18:58
cnfarer
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:179
帖 子:3330
专家分:21157
注 册:2010-1-19
收藏
得分:20 
function g(o){return document.getElementById(o);}  //通过ID获得相应对象
function HoverLi(n){  
//如果有N个标签,就将i<=N;  
for(var i=1;i<=6;i++){//分别设置两类对象的样式表
g('tb_'+i).className='normaltab';设置tb_i有样式表,这一类是相同的
g('tbc_0'+i).className='undis';设置tb_0i有样式表,这一类也是相同的
}
下面两行代码:设置序号为n的对象的样式表.也就是说,单击该行时,该行及下面的对应行样式与其它行不同
g('tbc_0'+n).className='dis';
g('tb_'+n).className='hovertab';  
}

★★★★★为人民服务★★★★★
2012-11-26 10:59
xdsnet
Rank: 1
等 级:新手上路
帖 子:22
专家分:0
注 册:2013-2-27
收藏
得分:0 
如果增加一个全局变量记录原始状态,还可以取消掉循环实现同样的功能,例如
var oldSel=1;//初始(刷新后)是第一条被选中(html语言设置的)
function HoverLi(n){   
//下面根据状态记录取消选中的样式
g('tb_'+oldSel).className='normaltab';
g('tbc_0'+oldSel).className='undis';
//对当前选中设置样式
g('tbc_0'+n).className='dis';
g('tb_'+n).className='hovertab';  
//重新记录状态
oldSel=n;
}

2013-02-28 09:19
快速回复:求大神解释下面的scipt语句 谢谢 html代码可以不用管 谢谢
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020675 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved