flyxiang228
- 浏览: 60291 次
- 性别:
- 来自: 江西
-
文章分类
最新评论
<!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" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一个简单的javascript tab选项卡</title>
<meta name="keyword" content="javascript tab选项卡" />
<meta name="description" content="一个简单的javascript tab选项卡" />
<script type="text/javascript">
/**
* @author
* @copyright private
* @create 23/11/2010
*/
var tab = function(data){
this.data = data;
}
tab.prototype = {
init:function(){
var $t = this;
var $d = this.data;
$d.t1 = $d.t1?$d.t1:'span';
$d.t2 = $d.t2?$d.t2:'ul';
$d.cur = $d.cur?$d.cur:'current';
$d.s = $d.s?$d.s:0;
$d.ts1 = document.getElementById($d.id).getElementsByTagName($d.t1);
$d.ts2 = document.getElementById($d.id).getElementsByTagName($d.t2);
$d.ts1[$d.s].className = $d.cur;
$d.ts2[$d.s].style.display = 'block';
for(var i = 0; i < $d.ts1.length; i++){
$d.ts1[i].onmouseover = (function(i,$d){
return function(){
$d.ts2[$d.s].style.display = 'none';//隐藏前面显示的内容
$d.ts1[$d.s].className = '';//设置之前选中类为null
$d.s = i;//将当前选中索引值负值给$d.s
this.className = $d.cur;//设置当前选中样式
$d.ts2[i].style.display = 'block';//显示当前选中项对应的内容
}
})(i,$d)
}
}
}
</script>
<style type="text/css">
*{margin:0;padding:0;list-style:none}
body{padding:10px;font-size:12px;}
.tab{width:520px;background:#fff;margin-bottom:10px;}
.tab span{float:left;height:20px;line-height:20px;width:78px;border:1px solid #aeaeae;border-bottom:none;margin:0 5px 0 0;text-align:center;cursor:pointer;}
.tab span.current{position:relative;margin-bottom:-1px;background:#fff;height:21px;}
.tab ul{clear:both;border:1px solid #aeaeae;padding:5px;display:none;}
</style>
</script></head>
<body>
<div id="tab" class="tab">
<span>选项A</span>
<span>选项B</span>
<span>选项C</span>
<span>选项D</span>
<span>选项E</span>
<span>选项F</span>
<ul><li>切换吧切换吧a</li></ul>
<ul><li>切换吧切换吧b</li></ul>
<ul><li>切换吧切换吧C</li></ul>
<ul><li>切换吧切换吧D</li></ul>
<ul><li>切换吧切换吧E</li></ul>
<ul><li>切换吧切换吧F</li></ul>
</div>
<div id="tab1" class="tab">
<span>选项A</span>
<span>选项B</span>
<span>选项C</span>
<span>选项D</span>
<span>选项E</span>
<span>选项F</span>
<ul><li>切换吧切换吧a</li></ul>
<ul><li>切换吧切换吧b</li></ul>
<ul><li>切换吧切换吧C</li></ul>
<ul><li>切换吧切换吧D</li></ul>
<ul><li>切换吧切换吧E</li></ul>
<ul><li>切换吧切换吧F</li></ul>
</div>
<script type="text/javascript">
var tab1 = new tab({id:'tab',s:5});
tab1.init()
var tab = new tab({id:'tab1',s:5});
tab.init()
</script>
</body>
</html>
分享到：
发表评论
-
粒子喷泉
2011-07-18 17:43 861注：来自http://daimaren.cn/blog/?p= ... -
jquery validate addMethod
2011-06-20 15:18 1536只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 738http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2279用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 812直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1054gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1920// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 1028支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7901、效果1：关于新闻信息文字上下切换 <div i ... -
jquery实现键盘上下键、return键选折li
2011-03-16 11:42 6591注释：code来源javaeye 使用前要引入jquery库 ... -
随滚动条移动的层
2011-02-15 09:51 804<!DOCTYPE html PUBLIC &quo ... -
yui的学习脚印
2011-01-30 22:37 958<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 681vim命令 vi和vim是linux和u ... -
js左右滚动效果
2011-01-21 14:49 1830<!DOCTYPE html PUBLIC &quo ... -
javascript基础知识
2011-01-19 09:45 730注释：来自http://www.csssea.com/?p=7 ... -
Javascript浏览器兼容问题
2011-01-14 00:13 1021Javascript浏览器兼容 1.doc ... -
常用的正则表达式
2011-01-10 13:47 654/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 906动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1451/** * @author wangxiang * ... -
javascript方法（Methods）
2010-12-28 23:49 9661、Array array.concat(item..) co ...
相关推荐
CSS Tab选项卡的实现可以完全不依赖JavaScript，利用`:target`伪类来切换内容的显示。当用户点击某个标签时，对应的ID将会添加到URL的哈希部分，`:target`伪类可以检测这个变化并隐藏其他内容。 3. **响应式设计**...
创建Tab选项卡的基础HTML结构通常包括两部分：一个是包含各个选项卡的容器，另一个是对应的面板内容区域。例如： ```html <li><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li>...
不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言，它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...
总结来说，"非常好的一个tab选项卡"是指在VS2005中用JavaScript实现的Web界面元素，它提高了用户界面的可操作性和易用性。通过分析提供的压缩包文件，我们可以深入研究其背后的实现机制，了解如何使用HTML、CSS和...
压缩包中的`tabphoto`文件可能包含了一个实际的JavaScript相册Tab选项卡切换的示例。`Readme-说明.htm`可能是说明文档，介绍了如何部署和使用这个示例。 5. **优化与扩展**： - **响应式设计**：为了适应不同设备...
首先，layui的Tab选项卡是一个常见的页面布局元素，用于将大量内容组织成清晰、简洁的模块，用户可以通过点击不同的选项卡来切换显示的内容。这种功能在展示多层级信息或者避免页面过于拥挤时特别有用。在layui中，...
"Tab选项卡"是这种交互模式的一种实现方式，通常在网页顶部或侧边设置，每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签：每个选项卡都...
"漂亮的JSP TAB选项卡"是一个专为提高用户体验而设计的组件，它在网页上以选项卡的形式组织内容，用户可以通过点击不同的选项卡来切换查看不同的页面部分。这种设计方式极大地优化了网页的布局，减少了页面滚动的...
Tab选项卡通常由一组水平排列的标签组成，每个标签代表一个独立的内容区域。当用户点击某个标签时，相应的内容区域会显示出来，而其他区域则会被隐藏。这种设计模式广泛应用于各种Web应用、软件界面和网站，用于管理...
"TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能，它旨在提供高效、直观且易于导航的操作界面。在这个主题下，我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...
一个简单的选项卡通常包含一个容器（如`<div>`），里面有两个主要部分：一个是用于显示选项卡标题的`<ul>`列表，另一个是包含多个内容面板的容器。每个选项卡标题对应一个内容面板，内容面板默认隐藏，当对应的标题...
纯CSS3经典Tab选项卡动画特效是一种无需JavaScript插件，仅通过CSS3属性实现的交互设计。这种技术在现代网页设计中广泛应用，因为其能够提供流畅的用户体验且减少了对JavaScript的依赖，从而优化了页面加载速度。...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
本文将深入探讨TAB选项卡的实现原理，功能特性，以及如何利用JavaScript和jQuery来构建一个动态且可定制的TAB选项卡组件。 #### 选项卡的核心功能 1. **多页面引用能力**：选项卡支持在同一个页面中多次引用，这...
在网页设计中，"tab选项卡切换效果"是一种常见的用户界面设计模式，它允许用户在有限的空间内查看和切换不同的内容区域。这种效果通常用于显示大量相关但互斥的信息，如产品详情、用户评论或者设置选项。在这个项目...
本资源提供的是一个实现“tab选项卡新闻列表切换效果”的源码，适用于快速构建这样的功能。 在实际应用中，tab选项卡通常由一组可点击的标签（如“新闻1”、“新闻2”等）和与之关联的内容区域组成。当用户点击某个...
"简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡（Tab）的交互功能。选项卡是网页设计中常用的布局方式，它可以有效地组织和展示大量内容，提高用户体验。下面我们将详细...
本文档将详细介绍如何使用HTML、CSS和JavaScript来创建一个简单的Tab选项卡。 #### 二、HTML结构 首先，我们需要构建Tab选项卡的基本HTML结构。这里给出的示例包含了三个主要部分：Web前端、后台脚本以及前端框架...
在前端开发中，Tab选项卡是一个常见的用户界面元素，用于组织和展示大量信息，使得用户可以方便地切换不同内容区域。"不规则TAB选项卡效果"通常指的是与传统样式不同的定制化选项卡设计，可能包括非矩形形状、动态...
本压缩包"jQuery多个tab切换选项卡代码.zip"提供了一个实现多选项卡切换的示例，适用于那些想要在自己的网站上增加动态、互动选项卡功能的开发者。 首先，让我们深入理解jQuery选项卡的基本原理。jQuery选项卡通常...