`
ayaya
  • 浏览: 456170 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript css的tab效果

CSSJavaScriptCC++C# 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a {
  color:#000000;
  text-decoration:none;
}
   
#header {
  float:left;
  width:760px;
  background:#D3D3D3;
  font-size:12px;
  line-height:normal;
}
#header ul {
  margin:0;
  padding:0px;
  list-style:none;
}
#header li {
 float:left;
 background:#DCE1EF;
 border:solid 1px #8EA2C2;
 margin-left:2px;
 padding:0px;
}
#header a {
 display:block;
 padding:5px 15px 4px;
}
#header .current {
 background:#FFFFFF;
 border-left:solid 1px #8EA2C2;
 border-top:solid 1px #8EA2C2;
 border-right:solid 1px #8EA2C2;
 border-bottom:solid 0px #8EA2C2;
 
}
#header .current a{
 padding-bottom:5px;
}
.content {
  margin-top:2px;
  width:760px;
}
.content .contentHeader {
  background-color:#BCC7E0;
  border:solid 1px #4B66A5;
  font-weight:bold;
  height:24px;
}

.content .contentMain {
 border-left:solid 1px #4B66A5;
 border-top:solid 0px #4B66A5;
 border-right:solid 1px #4B66A5;
 border-bottom:solid 1px #4B66A5;
 height:400px;
}

tr {
	background-color:expression((this.sectionRowIndex%2==0)?"#945643":"#fff")
}
</style>
<script type="text/javascript">
function change_option(number,index){
 for (var i = 1; i <= number; i++) {
      document.getElementById('current' + i).className = '';
      document.getElementById('content' + i).style.display = 'none';
 }
  document.getElementById('current' + index).className = 'current';
  document.getElementById('content' + index).style.display = 'block';
}


var varclk=null;
	var oldcolor=null;
	function change1(vartr)
	{
		if(varclk!=null)
		{
			varclk.style.backgroundColor=oldcolor;
			varclk.style.color="black";
		}
		oldcolor=vartr.style.backgroundColor;
		vartr.style.backgroundColor='#456';
		vartr.style.color="white";
		varclk=vartr;
	}
</script>
<title>Tab Test</title>
</head>

<body>
<div id="navbar">
 <div id="header">
  <ul>
    <li id="current1"><a href="#" onclick="change_option(3,1);">Tab-A</a></li>
    <li id="current2"><a href="#" onclick="change_option(3,2);">Tab-B</a></li>
    <li id="current3"><a href="#" onclick="change_option(3,3);">Tab-C</a></li>
  </ul>
 </div>
 <div id="content1" class="content">
   <div class="contentHeader">Tab-A</div>
   <div class="contentMain">
	   <table width="760" border="0">
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>d</td>
		    <td>e</td>
		  </tr>
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		    <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		</table>	
   </div>
 </div>
 <div id="content2" class="content" style="display:none">
   <div class="contentHeader">Tab-B</div>
   <div class="contentMain">
	   <table width="760" border="0">
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>d</td>
		    <td>e</td>
		  </tr>
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		    <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		</table>
   	</div>
 </div>
 <div id="content3" class="content" style="display:none">
   <div class="contentHeader">Tab-C</div>
   <div class="contentMain">
	   <table width="760" border="0">
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>d</td>
		    <td>e</td>
		  </tr>
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		    <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		</table>
		</div>
 </div>
</div>
</body>
</html>
分享到：
| javascript表单元素回车自动切换
评论
1 楼 freedomstyle 2010-01-29  
  不错学习了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript+css实现Tab效果

    `AveIcon.jpg`和`FlashCatcher.jpg`可能是用于Tab样式的图片资源，而`SWFDecompiler_icon.jpg`可能与解构Flash文件有关，但在这个JavaScript和CSS的Tab效果中并不直接相关。 总的来说，通过结合JavaScript的事件...

    13个css tab选项卡

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

    纯css tab切换效果（改进版）

    纯CSS实现的Tab切换效果尤其受到欢迎，因为它无需JavaScript，减少了代码依赖，提高了页面性能。在这个“纯css tab切换效果（改进版）”中，我们将探讨如何使用CSS来创建一个功能完善且视觉吸引人的Tab切换组件。 ...

    css tab 效果编辑器

    "CSS Tab效果编辑器"是专门为创建和编辑这种类型的CSS样式而设计的工具，特别关注于实现tab式界面的效果。 Tab效果通常用于网页中组织大量内容，让用户能够通过点击不同的选项卡轻松切换查看不同的部分。这种效果...

    javascript+CSS实现Tab效果

    标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计，即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容，提高用户体验，尤其在信息组织和展示时非常实用。下面将...

    用CSS写的Tab滑动轮

    2. **JS**：JavaScript，通常与CSS结合使用，用于处理用户交互，如点击事件，以及控制内容的显示和隐藏，实现Tab的切换逻辑。 3. **tab**：Tab组件，是网页设计中的一种常见元素，通常由一组可点击的标签和与其关联...

    JavaScript实现tab栏切换效果

    总的来说，这个示例展示了如何使用基础的 HTML、CSS 和 JavaScript 技术实现一个 Tab 切换效果。通过对元素的选择、操作和事件监听，我们可以创建出交互性强、用户体验良好的网页组件。同时，这种实现方式也便于扩展...

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

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

    DIV+CSS+JavaScript实现tab切换的选项卡

    在网页设计和开发中，`DIV+CSS+JavaScript` 是一种常见的组合，用于构建动态、交互性强的用户界面。`DIV`（Division）是HTML中的一个块级元素，常用来组织页面布局；`CSS`（Cascading Style Sheets）则负责样式设计...

    javascript+css 实现的web tab

    在本项目中，“javascript+css实现的web tab”是一个利用JavaScript和CSS技术创建的Web Tab组件。这个组件能够帮助开发者在网页上构建具有美观外观和交互效果的标签页。 首先，我们来探讨CSS在这个项目中的作用。...

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

    纯CSS实现的Tab标签切换可以提供更加高效、简洁的交互体验，而无需依赖JavaScript等编程语言。本项目名为“纯css半圆角tab标签切换代码”，它包含了六个HTML文件，每个文件代表一种不同的Tab状态或布局，用于实现...

    javascript+CSS实现Tab效果（2）

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

    很漂亮的jquery+css Tab切换效果

    在这个"很漂亮的jquery+css Tab切换效果"项目中，我们将深入探讨如何利用jQuery和CSS来创建这种效果，并自定义其动画和样式。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、...

    div+css tab样式

    下面我们将深入探讨`div+css`以及如何实现`tab`样式的相关知识。 一、`div`元素 `div`（division）是HTML中的一个块级元素，常用来作为容器，对网页内容进行分组。它可以包含文本、图像、链接等其他HTML元素，通过...

    纯css3经典tab选项卡动画特效

    纯CSS3经典Tab选项卡动画特效是一种无需JavaScript插件，仅通过CSS3属性实现的交互设计。这种技术在现代网页设计中广泛应用，因为其能够提供流畅的用户体验且减少了对JavaScript的依赖，从而优化了页面加载速度。...

    纯CSS写的TAB切换

    纯CSS实现的TAB切换是一种常见的网页交互设计，它允许用户在不同的内容区域之间进行无JavaScript的导航。在本文中，我们将深入探讨纯CSS TAB切换的工作原理、关键样式以及如何实现这样的功能。 首先，理解TAB切换的...

    css tab 一个自动生成纯CSS精致漂亮的菜单工具

    7. **JavaScript增强**：虽然CSS可以创建静态的Tab菜单，但为了实现更复杂的功能，如自动切换、动态加载内容，通常会结合JavaScript来增强交互性。 综上所述，这个“css tab”工具可能是为了简化和加速CSS Tab菜单...

    JavaScript和css实现tab样式

    JavaScript 和 CSS 是实现这种交互效果的关键技术。本篇文章将详细探讨如何利用这两种技术来创建一个功能完备的Tab样式。 首先，我们需要理解CSS（层叠样式表）的作用。CSS是用于控制网页样式的语言，它可以定义...

    css tab 特效

    在描述中提到的“EasyTabs1.2”可能是一个具体的CSS Tab插件或者示例代码库，它提供了一种简单的方法来实现这种效果。 首先，让我们理解Tab特效的基本结构。通常，一个Tab组件由两部分组成：Tab头（包含各个Tab标签...

    仿 浏览器tab效果实现

    总的来说，“仿浏览器Tab效果实现”涉及到的知识点包括：HTML结构设计、CSS样式控制、JavaScript/jQuery交互实现、以及前后端分离的开发模式。理解并掌握这些技能，对于提升Web应用的用户体验和开发效率具有重要意义...

Magicbox
Global site tag (gtag.js) - Google Analytics