css+javascript制作下拉面板

最新推荐文章于 2024-04-16 09:38:10 发布

原创最新推荐文章于 2024-04-16 09:38:10 发布 · 1.3k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #css #class #border #generator #function

本文介绍了一种使用 HTML 和 JavaScript 实现的简单 Tab 切换效果。通过定义不同的样式类来改变 Tab 的外观，并利用 JavaScript 控制 Tab 的切换及对应内容的显示与隐藏。该方法易于理解且便于维护。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">
/*定义整体样式*/
.tab_wrap{
text-align:center;
width:200px;
margin:0px auto;
border:2px solid blue;
}
/*定义ul样式*/
ul.tab{
height:24px;
list-style:none;
margin:0px auto;
padding:0px;
}
/*定义li样式*/
ul.tab li{
float:left;
height:24px;
padding:0 1em;
font:14px "宋体";
cursor:pointer;
}
/*定义列表项在没有鼠标滑过时的样式*/
.normal{
color:red;
background:white;
border:1px solid black;
border-bottom:none;
}
   /*定义列表项在有鼠标滑过时的样式*/
   .hover{
   color:blue;
   background:white;
   border:1px solid black;
   border-bottom:none;
   }
   /*定义下拉框区域整体样式*/
   .content{
   height:auto;
   padding:6px;
   clear:both;
   text-align:left;
   }
   /*定义下拉区域的隐藏与显示*/
   .none{
   display:none;
   }
   .show{
   display:block;
   }
</style>

<script type="text/javascript">
function hover(n,counter){
var $=function(o){
return document.getElementById(o);
}
for(var i=1;i<=counter;i++){
$('tab'+i).className='normal';
$('content'+i).className='none';
}
$('tab'+n).className='hover';
$('content'+n).className='show';
}
</script>

</head>

<body>

<div class="tab_wrap">

<ul class="tab">
<li id="tab1" class="hover" onmouseover="hover(1,3);">tab1</li>
<li id="tab2" class="normal" onmouseover="hover(2,3);">tab2</li>
<li id="tab3" class="normal" onmouseover="hover(3,3);">tab3</li>
</ul>

<div class="content">
<div id="content1" class="show"><img src="images/1.jpg" width="200px"></div>
<div id="content2" class="none"><img src="images/2.jpg" width="200px"></div>
<div id="content3" class="none"><img src="images/3.jpg" width="200px"></div>
</div>

</div>
</body>
</html>

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/Achengxuyuan/archive/2011/04/21/6340114.aspx

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。