1、CSS
.card_blank_73 {
/* BACKGROUND-IMAGE:url(images/card_blank_bg_73.gif)*/; BORDER-BOTTOM: #ff7300 1px solid; overflow:hidden;
}
.card_normal_73 {
BORDER-RIGHT: #c2c2c2 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c2c2c2 1px solid; PADDING-LEFT: 5px;/* BACKGROUND-IMAGE: url(images/card_normal_bg_73.gif);*/ PADDING-BOTTOM: 0px; BORDER-LEFT: #c2c2c2 1px solid; WIDTH: 90px; PADDING-TOP: 2px; BORDER-BOTTOM: #ff7300 1px solid; TEXT-ALIGN: center
}
.card_down_73 {
BORDER-RIGHT: #ff7300 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ff7300 1px solid; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 14px;/* BACKGROUND-IMAGE: url(images/card_down_bg_73.gif);*/PADDING-BOTTOM: 0px; BORDER-LEFT: #ff7300 1px solid; WIDTH: 90px; COLOR: #333; PADDING-TOP: 3px; TEXT-ALIGN: center
}
2、实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tab.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
function selectMenu(idv){
document.getElementById("menu"+idv).className = "card_down_73";
}
</script>
</head>
<body>
<table cellSpacing=0 cellPadding=0 width="100%">
<tr>
<td class="card_normal_73" id="menu0" onclick="selectMenu(0)>
<a href="#">Menu1</a>
</td>
<td class="card_normal_73" id="menu1" onclick="selectMenu(1)>
<a href="#">Menu2</a>
</td>
<td class="card_down_73" id="menu2" onclick="selectMenu(2)>
<a href="#">Menu3</a>
</td>
<td class="card_normal_73" id="menu3" onclick="selectMenu(3)>
<a href="#">Menu4</a>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
通过这个项目，开发者不仅可以学习到如何用纯CSS实现Tab标签切换，还能深入了解CSS的布局、样式控制、动态效果以及响应式设计等多个方面。这对于提升网页设计和开发技能，尤其是对于初学者来说，是非常宝贵的学习...
总的来说，利用CSS实现tab栏切换是Web前端开发中的一个重要技巧。它不仅可以帮助开发者创建直观的用户界面，还可以提高网页的可访问性和可维护性。对于初学者来说，理解这种实现方式有助于深化对CSS选择器和交互设计...
以上就是使用JavaScript和CSS实现Tab菜单的基本步骤。在这个过程中，我们需要注意浏览器兼容性问题，可能需要引入如jQuery这样的库来简化DOM操作，或者使用CSS3特性并配合polyfill来确保在旧版浏览器中的正常运行。...
最后，JavaScript 用于实现Tab的切换逻辑。当用户点击一个Tab时，对应的Tab内容应显示，其他内容则隐藏。可以使用JavaScript库如jQuery，也可以使用原生JavaScript编写。以下是一个简单的原生JavaScript示例： ```...
在网页设计中，Tab导航是一种常见的用户界面元素，它...总的来说，使用CSS实现Tab组件需要理解HTML结构、CSS样式以及必要的JavaScript交互。通过结合这三者，我们可以创建出符合需求的、具有良好用户体验的Tab导航。
首先，我们来看看“javascript+CSS实现Tab效果（2）”这个主题涉及到的关键知识点。 1. **HTML结构**： - Tab组件的基础结构通常包含一组表示Tab标题的`<a>`或`<li>`元素和对应的隐藏内容容器。在提供的`index....
2. **纯CSS实现** CSS Tab选项卡的实现可以完全不依赖JavaScript，利用`:target`伪类来切换内容的显示。当用户点击某个标签时，对应的ID将会添加到URL的哈希部分，`:target`伪类可以检测这个变化并隐藏其他内容。 ...
为了实现Tab的切换功能，我们需要编写JavaScript代码。这可以通过监听`click`事件，根据用户的选择切换内容区域的可见性。可以使用`Element.classList`方法添加或移除`active`类。 ```javascript document....
效果图地址：http://blog.sina.com.cn/s/blog_6b759ccf0101mbbt.html
总结一下，实现JavaScript和CSS的Tab样式涉及到以下几个关键点： 1. 使用CSS设置选项卡的基本样式和激活状态。 2. 利用JavaScript监听用户点击事件，动态切换内容区域。 3. 设计HTML结构，确保每个选项卡与对应的...
CSS主要用于样式化Tab按钮和内容区域，以及实现点击按钮时的内容切换效果。我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感，同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的...
JavaScript是实现Tab效果的关键，因为它负责处理用户交互。在描述中提到的"事件介绍"是指JavaScript中的事件处理，如`click`事件。当用户点击一个Tab时，JavaScript代码会被触发，来切换显示的内容。例如，可以为每...
- Tab的样式可以多样化，包括扁平化设计、3D效果、圆角、渐变色、图标组合等，这些都是通过CSS实现的。 - Tab可以是水平的，也可以是垂直的，甚至可以设计成不规则形状，满足不同设计需求。 - 注意保持Tab的一致...
首先，HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器（如`<div>`），里面嵌套着一组tab标题（可以是`<a>`或`<button>`标签）和与之对应的隐藏内容区域（例如`<div>`）。每个标题与对应的...
总结，jQuery+CSS实现的Tab切换效果结合了JavaScript的动态性和CSS的样式控制，能够提供优秀的用户体验。理解并掌握这一技术，对于提升网页交互性和吸引力至关重要。在实际应用中，开发者可以根据需求进行定制和扩展...
在本文中，我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计模式，它允许用户在多个视图或内容区域之间切换，而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息，如...
本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先，我们来看 CSS 部分，这部分主要负责定义页面的基本样式和 Tab 菜单的布局。在提供的 `index.css` 文件中，可以看到以下...
通过纯CSS实现Tab切换，可以减少JavaScript的依赖，提高页面加载速度，同时也能更好地控制样式和动画效果。本教程将深入探讨如何利用CSS实现五种不同的Tab切换对应内容效果。 首先，我们来理解Tab切换的基本结构。...
CSS实现Tab布局是指通过CSS来设计网页中用于内容切换的标签页布局方式，这是一种常见的用户界面交互设计，允许用户通过点击不同的标签来显示相应的页面内容。在给出的文档内容中，介绍了两种Tab布局的实现方式：内容...