蜗小牛
- 浏览: 62968 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
<!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=gb2312" />
<title>选项卡代码</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}
#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}
.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #ccc;}
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}
.tab_con {padding:12px;font-size: 14px; line-height:175%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
$(tab_conbox).find("li").hide();
$(tabtit).find("li:first").addClass("thistab").show();
$(tab_conbox).find("li:first").show();
$(tabtit).find("li").bind(shijian,function(){
$(this).addClass("thistab").siblings("li").removeClass("thistab");
var activeindex = $(tabtit).find("li").index(this);
$(tab_conbox).children().eq(activeindex).show().siblings().hide();
return false;
});
};
/*调用方法如下：*/
$.jqtab("#tabs","#tab_conbox","click");
$.jqtab("#tabs2","#tab_conbox2","mouseenter");
});
</script>
</head>
<body>
<div id="tabbox">
<h1>简洁jQuery滑动门插件 单击切换演示</h1>
<ul class="tabs" id="tabs">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox">
<li class="tab_con">
<p>i 澳门 农田alone</p>
</li>
<li class="tab_con">
<p>的水电费等三个法规和韩国发货</p>
</li>
<li class="tab_con">
<p>那机构纷纷uagfagfjrfdf</p>
</li>
<li class="tab_con">
<p>dasdfasfffffffffasdf</p>
</li>
</ul>
<h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1>
<ul class="tabs" id="tabs2">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox2">
<li class="tab_con">
<p>大风起兮云飞扬</p>
</li>
<li class="tab_con">
<p>ajfhakdfdsgfafka</p>
</li>
<li class="tab_con">
<p>好好啊哈奥啊哈</p>
</li>
<li class="tab_con">
<p>天气真好</p>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡代码</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}
#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}
.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #ccc;}
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}
.tab_con {padding:12px;font-size: 14px; line-height:175%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
$(tab_conbox).find("li").hide();
$(tabtit).find("li:first").addClass("thistab").show();
$(tab_conbox).find("li:first").show();
$(tabtit).find("li").bind(shijian,function(){
$(this).addClass("thistab").siblings("li").removeClass("thistab");
var activeindex = $(tabtit).find("li").index(this);
$(tab_conbox).children().eq(activeindex).show().siblings().hide();
return false;
});
};
/*调用方法如下：*/
$.jqtab("#tabs","#tab_conbox","click");
$.jqtab("#tabs2","#tab_conbox2","mouseenter");
});
</script>
</head>
<body>
<div id="tabbox">
<h1>简洁jQuery滑动门插件 单击切换演示</h1>
<ul class="tabs" id="tabs">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox">
<li class="tab_con">
<p>i 澳门 农田alone</p>
</li>
<li class="tab_con">
<p>的水电费等三个法规和韩国发货</p>
</li>
<li class="tab_con">
<p>那机构纷纷uagfagfjrfdf</p>
</li>
<li class="tab_con">
<p>dasdfasfffffffffasdf</p>
</li>
</ul>
<h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1>
<ul class="tabs" id="tabs2">
<li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li>
<li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
</ul>
<ul class="tab_conbox" id="tab_conbox2">
<li class="tab_con">
<p>大风起兮云飞扬</p>
</li>
<li class="tab_con">
<p>ajfhakdfdsgfafka</p>
</li>
<li class="tab_con">
<p>好好啊哈奥啊哈</p>
</li>
<li class="tab_con">
<p>天气真好</p>
</li>
</ul>
</div>
</body>
</html>
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1263<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 618CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1043script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 644该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19061。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1941浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 767有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1224<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 654对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1908开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 591进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 951<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 574■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 445<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 548很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1002CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 507定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1218{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 589<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 777所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能，提供多样的皮肤选择，使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素，用于组织和展示大量信息。它通过将相关...
标题“选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡”表明我们要讨论的是LabVIEW中的选项卡切换技术，这通常涉及到如何在LabVIEW程序中实现不同界面或工作空间之间的平滑过渡。 描述中提到...
修正了原来《http://download.csdn.net/download/guo8ke/1512418》的bug，本选项卡是自行编写的选项卡代码， 可以动态生成选显卡，关闭选项卡， 每个选项卡 对应也可页面。点击选项卡之后，显示对应的页面内容。当...
"选项卡应用"是指在GUI界面上使用选项卡控件，让用户通过不同的选项卡来访问和操作不同的功能区域，使得界面更加清晰、操作更加方便。本篇将深入探讨如何在MATLAB中实现GUI的选项卡应用。 首先，`tabpanelcopydemo....
在IT行业中，网页设计是至关重要的一环，而选项卡样式则是网页设计中常见的交互元素，它可以帮助用户在有限的空间内浏览多个相关但不同时显示的内容。"好看的选项卡样式"这个话题聚焦于如何通过CSS（层叠样式表）来...
在LabVIEW编程环境中，选项卡（Tab Control）是一种常见的用户界面元素，用于组织和展示多个相关的子VI或数据显示区域。本文将深入探讨如何在LabVIEW中禁用和启用选项卡，以及如何通过属性节点来操作这些功能，这对...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量内容，同时保持页面整洁。jQuery 是一个流行的 JavaScript 库，它提供了一系列便利的 API 和方法，使得实现动态切换选项卡功能变得非常...
在Android应用开发中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示多个相关的视图或内容区域。在本“android选项卡demo”中，开发者已经简单实现了选项卡的切换、颜色设置等基本功能。这个Demo主要涉及...
在网页设计中，"DIV选项卡样式下拉"是一种常见的交互设计模式，它允许用户在一个有限的空间内切换多个内容区域，提高用户体验。本技术主要涉及HTML、CSS（层叠样式表）和JavaScript（脚本语言）的应用，实现下拉条的...
在Vue.js中实现选项卡及选项卡切换效果是常见的需求，尤其在构建用户界面时。Vue.js是一个轻量级的JavaScript框架，它提供了强大的数据绑定和组件化特性，使得实现这种交互效果变得简单且高效。这里我们将探讨如何...
在网页设计中，选项卡是一种常见的用户界面元素，它允许用户在有限的空间内查看和交互多个相关但独立的内容区域。这种设计模式提高了用户体验，因为它减少了页面的混乱，使得信息更易于管理和导航。"web各种样式网页...
在网页设计中，选项卡（Tab）组件是一个常见的交互元素，它允许用户在不同的内容区域之间切换，而无需刷新整个页面。在这个主题中，我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先，HTML ...
"TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能，它旨在提供高效、直观且易于导航的操作界面。在这个主题下，我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
在本文中，我们将深入探讨如何使用jQuery和Bootstrap框架来实现自定义的添加和删除选项卡功能。Bootstrap是一款流行的前端开发工具，它提供了丰富的组件和样式，使得构建响应式和交互式的用户界面变得简单。而jQuery...
在LabVIEW中，"选项卡"是一种常用的界面元素，它允许用户在不同的功能或数据集之间切换，类似于传统应用程序中的“窗口”或“标签页”。 在标题中提到的“labview通过程序动态修改选项卡名称”，这是一个高级的...
在Android应用开发中，选项卡（Tab）是一种常见的界面元素，用于展示多个相互关联的页面或内容区域。本文将深入探讨如何使用View组件在Android中实现选项卡功能，结合具体的项目实践分享相关知识。 首先，我们需要...
在编程和用户界面设计中，选项卡控件是一种常见的组件，用于组织和展示大量信息。在LabVIEW（Laboratory Virtual Instrument Engineering Workbench）环境中，它是一个功能强大的工具，允许用户在一个窗口内切换不同...
在IT行业中，框架选项卡是一种常见的用户界面设计模式，它被广泛应用于网页和应用程序中，以帮助用户在多个视图或内容之间进行切换，而无需不断地打开和关闭新窗口。框架选项卡允许用户在一个单一的界面空间内组织和...