列表切换

最新推荐文章于 2022-11-17 17:15:38 发布

lideenweb

最新推荐文章于 2022-11-17 17:15:38 发布

阅读量369

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lideenweb/article/details/58604490

本文介绍了一个基于HTML和JavaScript实现的公告栏设计案例。该公告栏具备通过鼠标点击切换不同公告内容的功能，并且详细展示了如何使用内联样式和简单的JavaScript代码来控制公告标题和内容的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div{
text-align: center;
margin-top: 100px;
}
#clock{
border: 1px solid #ccc;
}*/
*{
margin:0;
padding:0;
list-style: none;
font-size:12px;
}
.notice{
width:298px;
height: 98px;
margin: 10px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position: relative;
background-color: #f7f7f7;
}
.notice-tit ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-tit li{
float: left;
width: 58px;
height: 26px;
line-height: 26px;
background-color: #fff;
border-bottom: 1px solid 1px;
padding:0 1px;
background-color: #f7f7f7;
text-align: center;
overflow: hidden;
}
.notice-tit li.select{
background-color: #fff;
border-bottom-color:#fff;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
padding:0;
font-weight: 600;
}
.notice li a:link ,
.notice li a:visited{
text-decoration: none;
color: #000;
}
.notice li a:hover{
color: #f90;
}
.notice-con{
margin: 10px 6px;
}
.notice-con .mod{
display: none;
}
.notice-con li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<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">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">301px</a></li>
<li><a href="#">301px</a></li>
<li><a href="#">301px</a></li>
<li><a href="#">301px</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">4</a></li>
<li><a href="#">4</a></li>
<li><a href="#">4</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
<div style="display: block;" class="mod">
<ul>
<li><a href="#">58px</a></li>
<li><a href="#">58px</a></li>
<li><a href="#">58px</a></li>
<li><a href="#">58px</a></li>
</ul>
</div>
</div>
</div>


<script type="text/javascript">
function $(id) {
return typeof id==="string"?document.getElementById(id):id;
}
// 点击切换
window.onload=function(){
var titles =$("notice-tit").getElementsByTagName('li');
var divs=$("notice-con").getElementsByTagName("div");
if (titles.length != divs.length) return;
for(var i=0; i<titles.length;i++){
titles[i].id=i;
titles[i].onclick=function(){
for(var j=0; j<titles.length; j++){
titles[j].className="";
divs[j].style.display="none";
}
this.className='select';
divs[this.id].style.display="block";
}
}
}

// 滑过切换
// window.onload=function(){
// var index =0;
// var timer =null;
// var tis =$("notice-tit").getElementsByTagName('li');
// var dis=$("notice-con").getElementsByTagName("div");
// if (tis.length!= dis.length) return;
// for (var i=0; i<tis.length; i++) {
// tis[i].id=i;
// tis[i].onmouseover=function(){
// var th=this;
// // 清楚定时器
// if(timer){
// clearTimeout(timer);
// timer=null;
// }
// // 延时执行
// timer=window.setTimeout(function(){
// // alert("1")
// for (var j=0; j<tis.length; j++) {
// tis[j].className="";
// dis[j].style.display="none";
// }
// tis[th.id].className='select';
// dis[th.id].style.display="block";
// },500);
// }
// }
// }

</script>
</body>
</html>