`
忧里修斯
  • 浏览: 436274 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

CSS实现Tab

阅读更多
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菜单

    在网页设计中,"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合,用于创建交互式的用户界面。这个主题涉及到JavaScript(JS)、层(Layer)管理、Div(CSS布局元素)以及CSS(级联样式表)的使用。下面我们将...

    纯css半圆角tab标签切换代码

    通过这个项目,开发者不仅可以学习到如何用纯CSS实现Tab标签切换,还能深入了解CSS的布局、样式控制、动态效果以及响应式设计等多个方面。这对于提升网页设计和开发技能,尤其是对于初学者来说,是非常宝贵的学习...

    使用css实现tab栏的切换

    总的来说,利用CSS实现tab栏切换是Web前端开发中的一个重要技巧。它不仅可以帮助开发者创建直观的用户界面,还可以提高网页的可访问性和可维护性。对于初学者来说,理解这种实现方式有助于深化对CSS选择器和交互设计...

    js+css实现tab菜单,很漂亮

    以上就是使用JavaScript和CSS实现Tab菜单的基本步骤。在这个过程中,我们需要注意浏览器兼容性问题,可能需要引入如jQuery这样的库来简化DOM操作,或者使用CSS3特性并配合polyfill来确保在旧版浏览器中的正常运行。...

    javascript+CSS实现Tab效果

    最后,JavaScript 用于实现Tab的切换逻辑。当用户点击一个Tab时,对应的Tab内容应显示,其他内容则隐藏。可以使用JavaScript库如jQuery,也可以使用原生JavaScript编写。以下是一个简单的原生JavaScript示例: ```...

    css实现tab

    在网页设计中,Tab导航是一种常见的用户界面元素,它...总的来说,使用CSS实现Tab组件需要理解HTML结构、CSS样式以及必要的JavaScript交互。通过结合这三者,我们可以创建出符合需求的、具有良好用户体验的Tab导航。

    javascript+CSS实现Tab效果(2)

    首先,我们来看看“javascript+CSS实现Tab效果(2)”这个主题涉及到的关键知识点。 1. **HTML结构**: - Tab组件的基础结构通常包含一组表示Tab标题的`&lt;a&gt;`或`&lt;li&gt;`元素和对应的隐藏内容容器。在提供的`index....

    13个css tab选项卡

    2. **纯CSS实现** CSS Tab选项卡的实现可以完全不依赖JavaScript,利用`:target`伪类来切换内容的显示。当用户点击某个标签时,对应的ID将会添加到URL的哈希部分,`:target`伪类可以检测这个变化并隐藏其他内容。 ...

    CSS3实现的Tab多页签代码

    为了实现Tab的切换功能,我们需要编写JavaScript代码。这可以通过监听`click`事件,根据用户的选择切换内容区域的可见性。可以使用`Element.classList`方法添加或移除`active`类。 ```javascript document....

    div tab div+css 实现tab效果

    效果图地址:http://blog.sina.com.cn/s/blog_6b759ccf0101mbbt.html

    JavaScript和css实现tab样式

    总结一下,实现JavaScript和CSS的Tab样式涉及到以下几个关键点: 1. 使用CSS设置选项卡的基本样式和激活状态。 2. 利用JavaScript监听用户点击事件,动态切换内容区域。 3. 设计HTML结构,确保每个选项卡与对应的...

    纯HTML和CSS实现Tab切换效果

    CSS主要用于样式化Tab按钮和内容区域,以及实现点击按钮时的内容切换效果。我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感,同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的...

    javascript+css实现Tab效果

    JavaScript是实现Tab效果的关键,因为它负责处理用户交互。在描述中提到的"事件介绍"是指JavaScript中的事件处理,如`click`事件。当用户点击一个Tab时,JavaScript代码会被触发,来切换显示的内容。例如,可以为每...

    Div+Css的Tab菜单

    - Tab的样式可以多样化,包括扁平化设计、3D效果、圆角、渐变色、图标组合等,这些都是通过CSS实现的。 - Tab可以是水平的,也可以是垂直的,甚至可以设计成不规则形状,满足不同设计需求。 - 注意保持Tab的一致...

    css+div漂亮的圆角tab选项卡

    首先,HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器(如`&lt;div&gt;`),里面嵌套着一组tab标题(可以是`&lt;a&gt;`或`&lt;button&gt;`标签)和与之对应的隐藏内容区域(例如`&lt;div&gt;`)。每个标题与对应的...

    jQuery+css实现tab切换效果

    总结,jQuery+CSS实现的Tab切换效果结合了JavaScript的动态性和CSS的样式控制,能够提供优秀的用户体验。理解并掌握这一技术,对于提升网页交互性和吸引力至关重要。在实际应用中,开发者可以根据需求进行定制和扩展...

    纯css3实现的tab标签切换效果

    在本文中,我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计模式,它允许用户在多个视图或内容区域之间切换,而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息,如...

    js+css实现tab菜单切换效果的方法.docx

    本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先,我们来看 CSS 部分,这部分主要负责定义页面的基本样式和 Tab 菜单的布局。在提供的 `index.css` 文件中,可以看到以下...

    纯CSS完成tab5种不同切换对应内容效果

    通过纯CSS实现Tab切换,可以减少JavaScript的依赖,提高页面加载速度,同时也能更好地控制样式和动画效果。本教程将深入探讨如何利用CSS实现五种不同的Tab切换对应内容效果。 首先,我们来理解Tab切换的基本结构。...

    CSS实现Tab布局的简单实例(必看)

    CSS实现Tab布局是指通过CSS来设计网页中用于内容切换的标签页布局方式,这是一种常见的用户界面交互设计,允许用户通过点击不同的标签来显示相应的页面内容。在给出的文档内容中,介绍了两种Tab布局的实现方式:内容...

Global site tag (gtag.js) - Google Analytics