【免费】第十一课基于jQuery的选项卡1资源-CSDN文库

需积分: 0 181 浏览量更新于2022-08-03 收藏 187KB PDF 举报

jQuery 的选项卡</title><style>*{margin:0px;padding:0px;}#wrap{padding:100px;} .tabIndex{border:1px solid orange;cursor: pointer;}.activeTabIndex{background: orange;color:#fff;}.tabContent{width:300px;height:300px;border:1px solid #ccc;position: absolute;display: none;}</style><script src="./jquery.min.js"></script></head><body><div id="wrap"><div class="indexWrap"><span class="tabIndex activeTabIndex">按钮 1</span><span class="tabIndex">按钮 2</span><span class="tabIndex">按钮 3</span></div><div class="indexContent"><div class="tabContent" style="display: block;">内容 1</div><div class="tabContent">内容 2</div><div class="tabContent">内容 3</div></div></div><script>function TabOption(){var _this = this;_this.$tabIndex = $('.tabIndex');_this.$tabContent = $('.tabContent');_this.index = 0;_this.timer = null;_this.tabFn = function(){_this.$tabIndex.eq(_this.index).addClass('activeTabIndex').siblings().removeClass('activeTabIndex');_this.$tabContent.eq(_this.index).stop().fadeIn().siblings().hide();}_this.autoFn = function(){_this.timer = setInterval(function(){_this.index ++;if(_this.index == _this.$tabIndex.length){_this.index = 0;}_this.tabFn();},2000);}_this.init = function(){$('.tabIndex').on('click',function(){_this.index = $(this).index();_this.tabFn();}).on('mouseover',function(){clearInterval(_this.timer);_this.timer = null;}).on('mouseout',function(){_this.autoFn();});_this.$tabContent.on('mouseover',function(){clearInterval(_this.timer);_this.timer = null;}).on('mouseout',function(){_this.autoFn();});_this.autoFn();};_this.init();}</script></body></html> 在这篇关于基于jQuery的选项卡实现的教程中，我们主要讨论了两种不同的方法：面向过程和面向对象。这两个方法都是用来创建交互式的选项卡组件，通常用于展示不同内容块，如产品介绍、新闻列表等。 **一．面向过程选项卡** 面向过程的实现方式通常涉及将JavaScript代码直接写在HTML文档中，通过jQuery选择器和事件处理来控制选项卡的行为。在这个例子中： 1. 我们定义了样式，使按钮具有明显的边界和鼠标悬停效果。 2. 然后，通过`$(function($) {...})`来确保在DOM加载完成后执行代码，这是jQuery中的文档就绪函数。 3. 我们获取到所有的选项卡按钮（`.tabIndex`）和内容区域（`.tabContent`），并初始化计时器变量`timer`、索引`index`。 4. `tabFn`函数负责切换活动选项卡和内容，通过添加/移除类名来改变样式，并使用fadeIn/fadeOut实现平滑过渡。 5. `autoFn`函数用于设置定时器，每两秒自动切换到下一个选项卡。 6. 使用事件监听器来处理点击、鼠标悬浮事件，从而控制自动切换和手动切换的逻辑。 **二．面向对象选项卡** 面向对象的实现方式是将逻辑封装在一个自定义的函数（这里称为`TabOption`）中，使其更易于维护和扩展。步骤如下： 1. 初始化`TabOption`对象时，我们获取到选项卡按钮和内容区域的jQuery对象，并存储在实例变量中。 2. 定义`tabFn`和`autoFn`方法，功能与面向过程方法中的相同，但它们现在是对象的方法。 3. `init`方法用于设置事件监听器，当点击或悬浮在选项卡上时，会调用相应的处理函数。 4. 和面向过程方法一样，我们也使用了`mouseover`和`mouseout`事件来控制自动切换的开关。这两种方法各有优势。面向过程的方法简单明了，适合小规模项目，而面向对象的方法更有利于代码组织和复用，适合大型项目。总结，这个教程展示了如何使用jQuery来实现动态选项卡效果，包括手动切换和自动轮播，这在前端开发中是非常常见且实用的技术。通过理解并实践这两种方法，开发者可以更好地掌握jQuery和前端交互设计。