jQuery实现tab选项卡效果的方法
更新时间：2015年07月08日 16:05:09 作者：沉淀岁月
这篇文章主要介绍了jQuery实现tab选项卡效果的方法,实例分析了jquery实现tab选项卡切换效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下：
var tabs = {
init: function(){
var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
$tab_contents.find('.tab-content:not(:first)').hide();
$tab_nav.find('li:first').addClass('active');
$tab_nav.on('click', 'li a', function(e){
e.preventDefault();
var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
$(parent,$tab_nav).find('li').removeClass('active');
$this.parent().addClass('active');
$contents.find('.tab-content').hide();
$contents.find(activeTab).fadeIn(250);
});
}
};
$(document).ready(tabs.init());
html部分如下：
<section> <h2>Section Title</h2> <ul class="tab-nav"> <li><a href="#tab1" title="">Tab 1</a></li> <li><a href="#tab2" title="">Tab 2</a></li> </ul> <div class="tab-contents"> <div id="tab1" class="tab-content"><!-- Tab 1 content here --></div> <div id="tab2" class="tab-content"><!-- Tab 2 content here --></div> </div> </section>
希望本文所述对大家的jquery程序设计有所帮助。
相关文章
本文给大家分享的是一则javascript滚动条插件的源码，十分的细致实用，有需要的小伙伴可以参考下。2015-03-03
本篇文章是对文件编码导致jquery失效的解决方法进行了详细的分析介绍，需要的朋友参考下2013-06-06
GridView中获取被点击行中的DropDownList和TextBox中的值
本文为大家介绍下如何通过点击GridView中的a标签获取被点击行中的下拉框和文本框中的值，具体实现嗲吗如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
本文主要对jQuery停止动画——stop()方法的使用进行详细介绍，对学习jQuery动画有很好的帮助，下面就跟小编一起来看下吧2016-12-12
本文主要介绍了jquery实现下拉框左右选择功能的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了jQuery实现的登录浮动框效果代码,点击登陆链接可弹出悬浮登录框,涉及jQuery中show与hide方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
使用easyui从servlet传递json数据到前端页面的两种方法
这篇文章主要介绍了用easyui从servlet传递json数据到前端页面的两种方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
ff下JQuery无法监听input的keyup事件的解决方法
这篇文章主要介绍了ff下JQuery无法监听input的keyup事件的解决方法。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
超简单的jquery的AJAX用法,需要的朋友可以参考下。2010-05-05
一个简单的jquery弹出框代码实现，点击链接弹出模式对话框，任意点击网页的其它地方可以关闭弹出框，可以自定义透明度，简单实用的jquery弹出框效果。2015-04-04
最新评论