jQuery制作Tabs
Tabs的效果在Web页面制作中,可以说是随处可见,我也知道有关于这样的教程在网上上相当的多,前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs,而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs,但这种方法相对来说是简单易于理解的,就算我这样的初学者都能理解。
如果你还不知道jQuery是什么东东,你钶以到jQuery官网了解他是什么?也可以浏览下列网站提供的相关教程:1stwebdesigner.com、sohtanaka.com、webdesignerwall.com、learningjquery.com。
HTML Markup
<ul class="tabs"> <li><a href="#tab1">Header1</a></li> <li><a href="#tab2">Header2</a></li> </ul> <div class="tabContent"> <div id="tab1" class="tabBody">content for header1</div> <div id="tab2" class="tabBody">content for header2</div> </div>
我采用了一个无序列表来制作tabs的Header部分,然后相邻的地方放置的是主内容的容器“div.tabContent”,里面对应的是每个内容“div.tabBody”。需要注意的是“在tabs中每个列表项中有一个锚点a,并且定义其“href”属性,这们此处需要做到的一点是,将“tabBody”中设置一个ID,并且ID号是和tabs列表项中a元素的“href”值是相互匹配的,这一点对于我们后面使用jQuery实现日Tabs功能是很重要的”。我们在这个例子中取名为“tab1”、“tab2”只是为了大家更好的理解,在实际应用中,你应该使用关键字或更具有语义化的词语,这样有利于你的SEO优化。
CSS Code
结构完成,大家就想使用CSS来美化这个tabs,但有一个问题我想大多数人都有碰到过,特别是在IE6浏览器下,当是当前状态下同样会显不一条底部的边线,如下图所示:
我是这样解决的:
具体边框颜色需要根据你的设计而定,有一个关键地方就是“就是"li.active"的border-bottom颜色需要设置成当前项的背景色,比如此例为"#fff"色”。具体参阅下面的CSS代码:
/*====tabs标题样式设置====*/ .tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px;/*设置tabs的高度*/ /*根据上图所示,设置列表ul的左边框和右边框*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } .tabs li { float: left; margin: 0; padding: 0; height: 31px;/*=列表项高度设置为比ul高度少1px,=*/ line-height: 31px;/*=设置相同的line-height让元素居中=*/ /*=根据上图显示,设置li的边框,并且左边框不设置=*/ border: 1px solid #999; border-left: none; margin-bottom: -1px;/*=将列表项下拉1px=*/ overflow: hidden; position: relative; background: #e0e0e0; } .tabs a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 10px; border: 1px solid #fff; outline: none; } .tabs a:hover { background: #ccc; } .tabs li.active, .tabs li.active a:hover { background: #fff; /*=设置当前tabs项的底部边框,颜色对面和主内容背景色一致=*/ border-bottom: 1px solid #fff; } /*==tabs主内容样式设置==*/ .tabContent { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tabBody { padding: 20px; font-size: 1.2em; }
jQuery Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //页面载入时 $('.tabBody:not(:first)').hide();//隐藏除了第一个主内容外的所有内容 $('.tabs li:first').addClass('active');//给第一个tabs标题项加上'active'类 //给列tabs的列表项绑定click事件 $('.tabs li').click(function(){ //当前项加上‘active’类,同时有'active'的相邻项移除'active'类 $(this).addClass('active').siblings('li.active').removeClass('active'); //隐藏所有主内容 $('.tabBody').hide(); //查找tabs标题中a元素的href属性值,以确定激活tabs对应的内容 var activeTab = $(this).find('a').attr('href'); //显示当前项的主内容 $(activeTab).fadeIn('slow'); return false; }); }); </script>
在写实现tabs功能的脚本之前,我们先要将jQuery的版本库导入进来,如果你还没有jQuery版本库,你可以点击下载jQuery版本库。接下来就是实现Tabs功能的jQuery代码,大家可以参考上面的代码,代码中做了详细的解说,我想你能看得懂的。
上面就是本次介绍的jQuery和CSS制作的一个简单功能的tabs选项卡的全部过程,和实现代码,希望大家喜欢这个教程。如果你有什么意见可以随时给我留言。
如需转载烦请注明出处:W3CPLUS
UA Air VaporMax 2019