css与js实现Tab标签切换

最新推荐文章于 2024-03-21 23:56:55 发布

转载最新推荐文章于 2024-03-21 23:56:55 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qandq/archive/2011/03/24/1994161.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种流行的Tab菜单切换效果实现方式，通过HTML、CSS和JavaScript代码展示了一个简单的示例，包括两个Tab页——演示和代码。

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

如下图所示的tab菜单切换，目前很流行这种效果。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签切换</title>
<style>
*{
font-size:10.5pt;
margin:0px;
padding:0px;
}
.codeDemoUL {
list-style: none;
clear:right;
overflow:hidden;
cursor:pointer;
z-index:3;
position:relative;
margin-bottom:-1px;
}
.codeDemoUL li {
float:left;
padding:5px 10px;
display:inline;
border-bottom:none;
margin: 0 5px 0 0;
overflow: visible;
line-height:1.5em;
}
.codeDemomouseOnMenu {
border:1px solid #bdc5c8;
border-bottom:1px solid #fff;
background-color:#fff;
font-weight:bold;
}
.codeDemomouseOutMenu
{
border:1px solid #bdc5c8;
background-color:#d7e0e3;
}
.codeDemoDiv {
clear:both;
border:1px solid #bdc5c8;
overflow:hidden;
margin-bottom:10px;
}
</style>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>
<body>
<ul class="codeDemoUL" id="ulMenu">
<li class="codeDemomouseOnMenu" onclick="showDiv('divDemo');this.className='codeDemomouseOnMenu'">演示</li>
<li class="codeDemomouseOutMenu" onclick="showDiv('divCode');this.className='codeDemomouseOnMenu'">代码</li>
</ul>
<div class="codeDemoDiv" id="divDemo">
<br />
   演示
</div>
<div class="codeDemoDiv" id="divCode" style="display:none">
<br />   代码
</div>

</body>
</html>

转载于:https://www.cnblogs.com/qandq/archive/2011/03/24/1994161.html