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

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

[img]http://dl.iteye.com/upload/attachment/276223/fb171d6b-82d1-3c82-964e-0248926462e2.jpg[/img]


<!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 之类的代码


[img]http://dl.iteye.com/upload/attachment/276257/10dc72c2-fc93-37c0-9822-9ac5ffa9c1d1.jpg[/img]


<!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上面的文件,如果你没有互联网只能自己找一个然后修改一下文件路径了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值