tab选框集合

最新推荐文章于 2022-02-25 18:19:43 发布
最新推荐文章于 2022-02-25 18:19:43 发布
阅读量168 收藏
点赞数
分类专栏： JavaScript 文章标签： C C++ C# jQuery ViewUI
圆角参考了经典论坛中坛友建议，把原来用的<u>换成了 <span>其实原理还是差不多的

淡入淡出的效果是更新网站时候的需求。。没有办法 只好实现了。。。

最开始图省事做的仿163切换的太简易了，后来扩充了一些东西，抛砖作为一个写的思路
有的代码重用性很大，完全可以把相同功能的写成函数，不要一遍一遍的再每一个页面都写上一堆一堆的<script>代码，太乱 而且管理也不方便

最后面的例子只是提供了一个扩充的思路。比如焦点图需要大图，小图，还有文字描述
具体样式就需要美工们自己去设计了！

[img]http://dl.iteye.com/upload/attachment/440698/d3fbe510-ba35-3cfb-8dea-a0ce44703bda.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/440702/9950d626-8ff7-3a48-b5f4-23c62efb5d07.jpg[/img]
[color=red]这个是套用了tab2方法实现的[/color]
实现思路，需要最外层一个div，左侧大图浮动居左，初始时display:none;
右侧四个小图浮动居右
对于tab2传入值：
tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
.d2是最外层div的class .bb是每个图片外的class .aa是右侧小图对应的class
on为小图的特殊样式--选中时
1500: 标签切换时间
800: 图片淡入时间
0.1: 内容渐进起始半透明度
1: 内容渐进结束半透明度

页面中需要多个的时候只需要修改 .d2 只要能保证每个焦点图外层的class是唯一的就行
或者使用id的选择器指定div

必须文件为jquery.js 版本理论上1.4.2就好，1.3.2无淡入淡出效果 



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tab</title>
<style>
html body 	{margin:0px; padding:0px;}

.t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;}

.aa	{background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.bb	{background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.cc	{background-color:#eee; width:100%; height:20px; display:none;}
.on	{background-color:#c21; width:30px; border-bottom:0px; border-top:0px;}

/* ---------- */

.yuan1 span	{display: block;overflow: hidden;height: 1px; border-color:#77a;} 
.yuan2 span	{display: block;overflow: hidden;height: 1px; border-color:#77a;} 
.span1		{margin:0px 3px; background-color:#77a;}
.span2		{margin:0px 1px; border-left:2px solid; border-right:2px solid;}
.span3		{margin:0px 1px; border-left:1px solid; border-right:1px solid;}

.d_body	{margin:50px;width:400px; height:400px; font-size:12px;float:left;}
.d_top	{height:40px; border-left:1px solid #77a; border-right:1px solid #77a;}
.d_t	{float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;}
.d_t a	{color:#555; text-decoration:none;}
.d_t a:hover	{color:#933; text-decoration:underline; font-weight:bold; }

.d_main	{border:1px solid #77a; border-top:0px; height:300px;}
.ln		{position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;}

.bbb		{background-color:#fff; height:100%; display:none; margin:10px;}
.on1	{border-bottom:1px solid #fff; background-color:#fff;}


.fl		{float:left;}
.clr	{clear:both;}
.of		{overflow:hidden;}
.textcenter{text-align:center;vertical-align:middle;}


</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
<!--
$(document).ready(function() {

	/*
		o1: 标签元素
		o2: 内容元素
		c : 标签元素显示用样式
		e : 触发事件 如 click mouseover 
	*/
	function tab1(o1,o2,c,e){
		o1.each(function(i){
			$(this).bind(e,function(){
				o2.hide().eq(i).show();
				o1.removeClass(c);
				$(this).addClass(c);
			})
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				o2.hide().eq(i).show();
			}
		})
	}


	/*
		o1: 标签元素
		o2: 内容元素
		c : 标签元素显示用样式
		t1: 标签切换时间
		t2: 内容渐进时间
		a : 内容渐进起始半透明度 0.1~1
		b : 内容渐进结束半透明度 0.1~1
	*/
	function tab2(o1,o2,c,t1,t2,a,b){
		var count=o1.size()-1;
		var now;
		var TimeInterval;
		o1.each(function(i){
			$(this).mouseover(function(){
				o2.hide().eq(i).show();
				o1.removeClass(c);
				$(this).addClass(c);
				window.clearInterval(TimeInterval);
			}).mouseout(function(){
				now = i+1;
				TimeInterval = window.setInterval(changeimage,t1);
			});

			//初始化显示
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				o2.hide().eq(i).show();
				now = i+1;
			}
		})

		TimeInterval = window.setInterval(changeimage,t1);
		function changeimage(){
			if(now>count)now=0;
			o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
			o1.removeClass(c).eq(now).addClass(c);
			now++;
		}
	}


	/*
		o1: 标签元素
		o2: 内容元素
		o3: 内容元素
		c : 标签元素显示用样式
		e : 触发事件 如 click mouseover 
	*/
	function tab3(o1,o2,o3,c,e){
		o1.each(function(i){
			$(this).bind(e,function(){
				o2.hide().eq(i).show();
				o3.hide().eq(i).show();
				o1.removeClass(c);
				$(this).addClass(c);
			})
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				o2.hide().eq(i).show();
				o3.hide().eq(i).show();
			}
		})
	}


	/*
		o1: 标签元素
		o2: 内容元素
		o3: 内容元素
		c : 标签元素显示用样式
		t1: 标签切换时间
		t2: 内容渐进时间
		a : 内容渐进起始半透明度 0.1~1
		b : 内容渐进结束半透明度 0.1~1
	*/
	function tab4(o1,o2,o3,c,t1,t2,a,b){
		var count=o1.size()-1;
		var now;
		var TimeInterval;
		o1.each(function(i){
			$(this).mouseover(function(){
				o2.hide().eq(i).show();
				o3.hide().eq(i).show();
				o1.removeClass(c);
				$(this).addClass(c);
				window.clearInterval(TimeInterval);
			}).mouseout(function(){
				now = i+1;
				TimeInterval = window.setInterval(changeimage,t1);
			});

			//初始化显示
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				o2.hide().eq(i).show();
				o3.hide().eq(i).show();
				now = i+1;
			}
		})

		TimeInterval = window.setInterval(changeimage,t1);
		function changeimage(){
			if(now>count)now=0;
			o3.hide().eq(now).show();
			o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
			o1.removeClass(c).eq(now).addClass(c);
			now++;
		}
	}

/*	[color=red]代码会执行，所以只能注释掉！运行的时候记得把这里的注释去掉[/color]
	//调用函数
	tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");
	tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");

	tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");
	tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");
	tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);

	tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");
	tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);
	tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);

*/


});
-->
</script>
</head>
<body>


<div class="d_body yuan1">
	<div>鼠标悬浮切换</div><br>
	<span class="span1"></span><span class="span2"></span><span class="span3"></span>
	<div class="d_top">
		<div class="ln"></div>
		<div class="d_t textcenter on1">
			<a href="javascript:">第一个标签</a>
		</div>
		<div class="d_t textcenter">
			<a href="javascript:">第二个标签</a>
		</div>
		<div class="d_t textcenter">
			<a href="javascript:">第三个标签</a>
		</div>
	</div>
	<div class="d_main clr of">
		<div class="bbb"><font color="blue">第一个内容</font></div>
		<div class="bbb"><font color="red">第二个内容</font></div>
		<div class="bbb"><font color="black">第三个内容</font></div>
	</div>
	<div class="clr of"></div>
</div>

<div class="d_body yuan2">
	<div>点击切换</div><br>
	<span class="span1"></span><span class="span2"></span><span class="span3"></span>
	<div class="d_top">
		<div class="ln"></div>
		<div class="d_t textcenter on1">
			<a href="javascript:">第一个标签</a>
		</div>
		<div class="d_t textcenter">
			<a href="javascript:">第二个标签</a>
		</div>
		<div class="d_t textcenter">
			<a href="javascript:">第三个标签</a>
		</div>
	</div>
	<div class="d_main clr of">
		<div class="bbb"><font color="blue">第一个内容</font></div>
		<div class="bbb"><font color="red">第二个内容</font></div>
		<div class="bbb"><font color="black">第三个内容</font></div>
	</div>
	<div class="clr of"></div>
</div>

<div class="t_body d0">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">点击切换</div>
	<div class="bb">4</div>
	<div class="bb">5</div>	
<div style="clear:both;"></div>
</div>

<div class="t_body d1">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">3</div>
	<div class="bb">4</div>
	<div class="bb">5</div>	
<div style="clear:both;"></div>
</div>

<div class="t_body d2">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">3</div>
	<div class="bb">4</div>
	<div class="bb">5</div>	
<div style="clear:both;"></div>
</div>

<div class="t_body d3">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">悬浮切换</div>
	<div class="bb">4</div>
	<div class="bb">5</div>
	<div class="cc">111111</div>
	<div class="cc">222222</div>
	<div class="cc">333333</div>
	<div class="cc">444444</div>
	<div class="cc">555555</div>	
<div style="clear:both;"></div>
</div>

<div class="t_body d4">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">3</div>
	<div class="bb">4</div>
	<div class="bb">5</div>
	<div class="cc">111111</div>
	<div class="cc">222222</div>
	<div class="cc">333333</div>
	<div class="cc">444444</div>
	<div class="cc">555555</div>	
<div style="clear:both;"></div>
</div>
<div class="t_body d5">
	<div class="aa">a</div>
	<div class="aa">b</div>
	<div class="aa on">c</div>
	<div class="aa">d</div>
	<div class="aa">e</div><br>
	<div class="bb">1</div>
	<div class="bb">2</div>
	<div class="bb">3</div>
	<div class="bb">4</div>
	<div class="bb">5</div>
	<div class="cc">111111</div>
	<div class="cc">222222</div>
	<div class="cc">333333</div>
	<div class="cc">444444</div>
	<div class="cc">555555</div>	
<div style="clear:both;"></div>
</div>


</body>
</html>
firseve
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tab 选择框
05-18
商业代码 提供功能需求 需要tab特效的可以看一看此特效
Tab选框
weixin_30906701的博客
08-21 67
<html>代码 基本架构：一个大的div下面2个ul，ul下面各三个li <div class="big"> <ul class="content"> <li class="one">水果</li> <li>服装</li> <li>电器</li> </ul> <...
tab选项框
daditao的专栏
03-08 712
最终效果图：  需要的图片： 命名：3.gif    命名：20080115123242961.gif     CSS代码：   <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-de
简单的tab框切换
weixin_30553837的博客
01-08 104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...
ie tab插件 chrome
02-10
IE Tab 这款插件对于Chrome的爱好者来说应该都不会感到陌生了。IE Tab插件的功能就是在Chrome浏览器中嵌入IE浏览器的内核，如果用户在用使用Chrome浏览过程中遇到只能兼容IE的网站，用户不需要从新在打开IE浏览器...
jquery渐变切换tab标签
06-10
在网页设计中，Tab标签是一种常见的用户界面元素，它用于组织和展示大量信息，通过切换不同的选项卡来显示不同的内容区域。"jQuery 渐变切换Tab标签"是将这一交互方式与动态视觉效果相结合，为用户提供更加吸引人的...
jquery tab插件
03-02
使用jq写的关于tab切换的插件，使用面向对象组件化开发
tab切换.html
05-28
四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示…… 那么，整体思路很简单，给四个标题绑定事件，...
一个仿淘宝的tab卡选框 jquery+css
05-31
一个仿淘宝的tab卡选框 jquery+css
简洁css竖型tab选项卡(用)
GoodShot的专栏
08-12 6550
1. 以下是程序代码 网页特效 简洁css竖型tab选项卡 站长特效网 <!-- body{ padding:0;font:12px "宋体"; } /*选项卡1*/ #lib_wwwzzjsnet{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} /*
input 下拉框 与tab 结合的选择
huangchen1986的博客
06-16 1744
先上效果： 刚开始的时候看到一个例子 ，是省、市、区三级选择的 ，做了一个，老师说效果不好，说我们这个只有二级类，直接把一级放在tab选项卡上，本来打算在找到的那个省、市、区三级选择里面改改，后来看了一下，自己没看懂，不是很好改，所以就自己写一个。在老师的指导下，用input下拉框和TAB组合。 第一次实现的时候，发现一点选项卡的文字，就跳出去了，后来就改为滑动mosemove
tab1
weixin_42033346的博客
07-28 563
package com.bwei.tab; import android.Manifest; import android.os.Build; import android.os.Handler; import android.os.Message; import android.support.v4.view.ViewPager; import android.util.Log; impor...
HTML Tab选项卡
热门推荐
黑码哥的技术博客
07-26 3万+
HTML Tab选项卡 选项卡 公告 规则 完美 功劳
Unity 【Content Size Fitter】- 聊天气泡自动适配Text文本框大小
当代野生程序猿
02-25 5469
通常在展示人物对话的时候文本的长度是不定的，因此会需要动态的调整对话内容文本框的背景图片的大小，这里以如下这种气泡框的对话为例： 实现该需求涉及到的内容包括Content Size Fitter组件的使用、2D Sprite工具包的使用。 Content Size Fitter组件用于Text文本框，如图所示，我们将Horzontal Fit设为Preferred Size，当我们调整Text文本框中的内容时，其大小会自动进行调整。 注意Rect Transform中Pivot轴心点的设置
新唐NUC972 Linux（一）：USB烧写linux出厂镜像
小破孩的博客
02-20 3092
USB烧写出厂镜像 文章目录USB烧写出厂镜像前言一、硬件连接二、安装驱动三、烧写linux程序四、运行程序 前言 今天开始进军linux，学了那么久单片机，也摸得七七八八，至少点个灯还是会的。本人之所以买酷客的linux开发板主要是便宜，资料也算齐全，虽然没有原子那么好，不过也够了，找那么多借口，其实就是qiong。今天先从USB烧录官方提供的linux相关程序到芯片开始吧。 一、硬件连接 1、连接电源线 2、RS232转USB，需要安装CH340驱动，用于在电脑串口超级终端中查看调试信息。 3、U
WeChall CTF Writeup（一）
weixin_43211186的博客
02-25 1265
以下题目标题组成： [Score] [Title] [Author] 文章目录0x01 1 Training: Get Sourced by Gizmore0x02 1 Training: Stegano I by Gizmore0x03 1 Training: Crypto - Caesar I by Gizmore0x04 1 Training: WWW-Robots by Gizmore0x05 1 Training: ASCII by Gizmore 0x01 1 Training: Get Sou

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值