翻出以前做的一个仿163Tab切换功能的简单代码

happysoul

浏览: 403495 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery C C++C#互联网

最近改网站需要用标签切换，懒得再写了就翻出了以前的代码，里面还有很多地方还是可以优化的，暂时就先不改动了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>仿163 tab</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	
	function tab(o1,o2,c,e){
		$(o1).each(function(i){
			$(this).bind(e,function(){
				$(o2).hide("").eq(i).show();
				$(o1).each(function(){
					$(this).removeClass(c);
				});
				$(this).addClass(c);
			})
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				$(o2).hide().eq(i).show();
			}
		})
	}
	tab(".d_t",".b","on","mouseover");
});
</script>
<style>
html body 	{margin:0px; padding:0px; font-size:12px;}
u		{display: block;overflow: hidden;height: 1px; border-color:#77a;} 
.u1		{margin:0px 3px; background-color:#77a;}
.u2		{margin:0px 1px; border-left:2px solid; border-right:2px solid;}
.u3		{margin:0px 1px; border-left:1px solid; border-right:1px solid;}

.d_body	{margin:50px;width:400px; height:400px;}
.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;}

.b		{background-color:#fff; height:100%; display:none; margin:10px;}
.on		{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>

</head>
<body>
	<div class="d_body">
		<u class="u1"></u><u class="u2"></u><u class="u3"></u>
		<div class="d_top">
			<div class="ln"></div>
			<div class="d_t textcenter on">
				<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="b"><font color="blue">第一个内容</font></div>
			<div class="b"><font color="red">第二个内容</font></div>
			<div class="b"><font color="black">第三个内容</font></div>
		</div>
		<div class="clr of"></div>
	</div>
</body>
</html>

当然这里的代码仅仅是个例子，使用了jquery，也许很多用过的人都会觉得没什么，不过参考了163的设计思路将通用方法封装成函数还是比较方便的
这里因为只有一个，所以对于一个页面里面多个这样功能的需要简单修改，
就是在 tab(".d_t",".b","on","mouseover")这个调用的函数里面对应增加一层
比如 .d_t这个样式外面增加一个 d1这样的一个div层，传入的样式就是 ".d1 .d_t"
这里面前两个是传入jquery选择器的样式代码，当然也可以是id 比如某个div的id是d1
传入的样式就改成 "#d1 .d_t"

其实最好的还是应该将$(".d_t")这样的jquery对象作为参数传入
如下面的例子，比较建议没有进行过多的样式美化，目的都是为了去掉类似id一样的限制，比如必须指定某个选框必须叫 d1 d2，而且换也只能针对 d1 d2，另外再有的时候又需要指定e1 e2 之类的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.a	{background-color:#eee; width:20px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.b	{background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.c li{float:left;background-color:#eee; width:20px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.d	{background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.on	{background-color:#c21; width:30px; border:5px solid red; border-bottom:0px; border-top:0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	
	function tab2(o1,o2,c,e){
		o1.each(function(i){
			$(this).bind(e,function(){
				o2.hide().eq(i).show();
				o1.each(function(){
					$(this).removeClass(c);
				});
				$(this).addClass(c);
			})
			if ($(this).hasClass(c)) {
				$(this).addClass(c);
				o2.hide().eq(i).show();
			}
		})
	}
	
	//tab2(".a",".b","on","click");
	tab2($(".a"),$(".b"),"on","mouseover");
	tab2($(".c li"),$(".d"),"on","click");
	
});
</script>
</head>
<body>
	<div class="a">a</div>
	<div class="a">b</div>
	<div class="a">c</div>
	<div class="a">d</div>
	<div class="a on">e</div><br>
	<div class="b">1</div>
	<div class="b">2</div>
	<div class="b">3</div>
	<div class="b">4</div>
	<div class="b">5</div>
	
	<br><br>
	
	<ul class="c">
		<li>1</li>
		<li class="on">2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul><br>
	<div class="d">1</div>
	<div class="d">2</div>
	<div class="d">3</div>
	<div class="d">4</div>
	<div class="d">5</div>
	

</body>
</html>

上面这个精简了很多代码比较容易理解
这个里面就是用了上面推荐的传入jquery对象的方法
tab2($(".c li"),$(".d"),"on","click");
这里面 a b c d e对应的就是$(".c li")这个jquery对象
1 2 3 4 5对应的是$(".d")这个jquery对象
不过推荐的方法是在两个的外面再加一层并使用不同的class或者id避免冲突
on是一个class 对应的是初始时候显示div的样式
最后的click对应的是事件，比如这里就是点击后切换，前面的mouseover就是鼠标经过时切换

给了完整代码了，复制到记事本里面另存为随意的 .html 就可以通过ie或ff看效果了
上面效果图我也放了两个
补充，里面用到了jquery.js文件，我使用的是google上面的文件，如果你没有互联网只能自己找一个然后修改一下文件路径了