当前位置:首页 » Blog, 前端 » 本页

jquery Tab选项卡精简制作,选项卡联动小技巧 In Blog, 前端  @2013-12-26 2,144 Vs

tab_sli

又是一个难得的26号,美国时间25号圣诞节,公司的一些安排,销售不用上班,所以有点时间来总结一下以前经常用到的选项卡的制作写法问题。
经常做设计图之后就是会接触那么点点写脚本代码的情况,脚本代码需要长久的积累,因为我们并不是每天都会去写这些东西,东西看多了写多了,就会有积累。
有些好的想法写法在这里列一下,作为自己的一个小小经验总结!

我们想到的tab选项卡是一个很常用的联动显示隐藏的功能,用JQ来写的话是很方便的,当然用Javascript也同会可以,就是会有点长,我们这里讲的是JQ的写法,所以在你的文件里一定会有一个Jquery.js这个库文件。

磨刀不误砍柴功,先来讲一下原理及想实现的

1、单击一标签,当前标签改变样式,与其它标签显示出不同的颜色或背景用于区分(可以直接添加Css类名,类名由Css表来控制)
2、同时联动一个Div框,用来显示当前标签下对应的内容;

原理就是这样子的,很简单的一个功能。

在头部注意须要加入这个引用库文件
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.js”></script>

下面先写一下html代码

<!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=utf-8″ />
<title>Tab选项卡</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<style type=”text/css”>
.cur{color:#ff0000;}
.tabitem{display:none;}
#menu1box{display:block;}
</style>
</head>
<body>
<!–tab菜单–>
<div id=”tabmenu”>
<a id=”menu1″ href=”#” class=”cur”>Tab01</a>
<a id=”menu2″ href=”#”>Tab02</a>
<a id=”menu3″ href=”#”>Tab03</a>
</div>
<!–联动div–>
<div class=”tabbox”>
<div class=”tabitem” id=”menu1box”>Tab01对应的内容</div>
<div class=”tabitem” id=”menu2box”>Tab02对应的内容</div>
<div class=”tabitem” id=”menu3box”>Tab03对应的内容</div>
</div>
</body>
</html>

结构写好了

解释一下代码:

样式部份

.cur是我们要添加在点击部分的类名,用于区分其它tab,第一个开始是默认显示特殊样式的,其它则没有;
.tabitem是控制全部对应的内容div,我们先把它全部隐藏用display:none来控制;
#menu1box是我们针对第一个tab对应的内容框控制,因为我们默认是要显第一个框的内容,所以我们在后面使用display:block来显示,覆盖了前面的.tabitem隐藏;

结构部份

这里有一个很重要的Tab对应的内容框的”id”的写法,这里要使用一个小技巧,很方便我们以后用脚本来控制,就是相对应的标签与内容id相差一个box,因为我们在后面的操作时要先获取当前的id,然后加上box生成与后面的id相同的id来控制显示隐藏;

进入主题(jq后面的代码中有解释)

<body>
<!–tab菜单–>
<div id=”tabmenu”>
<a id=”menu1″ href=”#” class=”cur”>Tab01</a>
<a id=”menu2″ href=”#”>Tab02</a>
<a id=”menu3″ href=”#”>Tab03</a>
</div>
<!–联动div–>
<div class=”tabbox”>
<div class=”tabitem” id=”menu1box”>Tab01对应的内容</div>
<div class=”tabitem” id=”menu2box”>Tab02对应的内容</div>
<div class=”tabitem” id=”menu3box”>Tab03对应的内容</div>
</div>

<script language=”javascript”>
$(document).ready(function(){

//添加tabmenu下任意a标签单击事件
$(“#tabmenu a”).click(function(){
var curid = $(this).attr(“id”);   //获取当前点击的标签的id,存在curid

//通过循环移除掉其它a标签中含的的类
//为什么要这么做,那是因为刚开始点击时可能并不是点击第一个,我们点击第二个就要移除第二个之外的其它类(cur)
$(this).each(function(){
$(“#tabmenu a”).removeClass();
})
$(this).addClass(“cur”);    //当前的标签添加上cur这个类名,达到区分的功能,当前的tab动作结束

//下面是联动DIV
$(“.tabitem”).hide();    // 下面的tabitem全部隐藏

$(“#” + curid + ‘box’).show();   //显示对应的需要显示的div
//(curid 这里就用上了,我们只要这一句,就可以针对所有的操作,不用多次单独写)

})

})

</script>
</body>

联动的方法就是样子,最重的就是要一步一步的去执行,利用js的特性(从上到下一句句执行),只要原理清楚,我相信大家都可以写出一个比较好的脚本代码出来。
当然上面的代码也还有很大的改进空间,比如你想要div切换时过渡效果,可以在show()和在hide()两个函数中加数字时间了。
如:show(1000)指1秒时间过过渡显示出来,hide(1000)1秒时间过过渡隐藏,还有一些高级的方法,从哪边开如显示或隐藏,只要你查一下jq 的函数就会使用。
多学多用多总结,久而久之,你就会了.
完整的Tab标签选项卡代码测试及下载链接: Tba选项卡标签

感谢您的阅读,希望能够给您带来启发



打签» ,   评论» 1枚

↓↓↓ 支持我们 ↓↓↓



已经有 1 枚评论. 发表 »

我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

搜索

返回顶部