tab选项卡，不带自动切换定时器
2024-10-08 17:20:47
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>Tab切换</title>
<link rel="stylesheet" type="text/css" href="css/tab.css"/>
</head>
<script type="text/javascript">
function $(id){
return typeof id==='string'?document.getElementById(id):id;
};
window.onload=function(){
//标签的索引
var index=0;
var timer=null; var lis=$('notice_tit').getElementsByTagName('li');
divs=$('notice_con').getElementsByTagName('div');
if(lis.length!=divs.length)
return;
// 遍历所有的页签
for(var i=0; i<lis.length; i++){
lis[i].id=i;
lis[i].onmouseover=function(){
// 清除定时器,只有在500ms后执行
if(timer){
clearTimeout(timer);
timer=null;
}
// 用that这个变量来引用当前划过的li
var that=this;
// 延迟半秒执行
timer=setTimeout(function(){
for (var j=0; j<lis.length;j++) {
lis[j].className='';
divs[j].style.display='none';
}
lis[that.id].className='select';
divs[that.id].style.display='block';
},100); } } }
</script>
<body>
<div class="notice" id="notice">
<div id="notice_tit" class="notice_tit">
<ul>
<li>
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li class="select">
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="notice_con" id="notice_con">
<div class="mod" style="display: none;">
<ul>
<li>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<a href="#">淘宝之星</a>
</li>
<li>
<a href="#">爱心品牌</a>
</li>
<li>
<a href="#">名公益机构</a>
</li> </ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li> <a href="#">张勇：快乐足球</a>
</li>
<li> <a href="#">张勇：快乐足球</a>
</li>
<li> <a href="#">张勇：快乐足球</a>
</li>
<li> <a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范的股份</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">发个梵蒂冈讽德诵功</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范化个地方</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: block;">
<!--<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">er</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">发个梵蒂冈讽德诵功</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范化个地方</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>-->
</div> </div>
</div>
</body>
</html>
//css样式
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
} .notice {
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #999;
overflow: hidden;
} .notice_tit {
height: 27px;
position: relative;
background: #f7f7f7;
} .notice_tit ul {
position: relative;
width: 301px;
left: -1px;
} .notice_tit ul li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background: #FFFFFF;
border-bottom: 1px solid #CCCCCC;
padding: 0 1px;
background: #EEEEEE;
}
.notice ul li a:link,.notice ul li a:visited{
text-align: center;
text-decoration: none;
color: #666;
} .notice ul li a:hover{color: #f90;}
.notice_tit ul li.select{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #999999;
padding: 0;
font-weight: bold;
} /*切换内容*/
.notice_con .mod{margin: 10px 10px 10px 19px;}
.notice_con .mod ul li{
float: left;width: 134px;
height: 25px;
overflow: hidden;
line-height: 25px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
}
最新文章
- 数据库基础及T-SQL语句
- mysql时间字符串按年/月/天/时分组查询
- LeetCode16 3Sum Closest
- Zabbix Api的使用
- struts2采用convention-plugin实现零配置
- 编写一个程序实现strcmp函数的功能
- Struts2标签：checkboxlist
- 笔记（json）实现前后端交互案例
- Mybaits入门使用
- jQuery之animate中的queue
- ansible--我的几个报错
- 【C/C++】void指针知多少
- 数据分析--降维--LDA和PCA
- Calico网络方案
- 给mysql数据添加一个只拥有一张表的权限
- 利用C#进行文件读写的方法选择总结
- HDU 4183
- Dubbo限制大数据传输的解决方案
- Python多线程-生产者消费者模型
- 检查SQL Server 2005的索引密度和碎片信息(转)