jQuery简单Tabs标签插件

最新推荐文章于 2024-03-09 15:45:51 发布

wjh8222

最新推荐文章于 2024-03-09 15:45:51 发布

阅读量87

点赞数

分类专栏： web前端文章标签： jQuery Tabs ViewUI

本文链接：https://blog.csdn.net/wjh8222/article/details/84186436

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/* 
jQuery简单Tabs标签插件

by ~Wang

html:
	<div id="tabs">
		<div class="tab_title">
			<ul>
				<li class="li_curr">Tabs效果</li>
				<li>jQuery插件</li>
			</ul>
		</div>
		<div class="tab_content">
			<ul>
				<li>是一个简单易用的 jQuery 的 Tab 插件。 </li>
				<li>jerichoTab是一款模拟 firefox 标签页的插件, </li>
				<li>jQuery UI 1.7.2 - ui.core.js and ui.tabs.js 在线演示...</li>
				<li>JQuery TabContainer Theme-一个JQuery的Tab选项卡内容</li>
				<li>jQuery Smooth Tabs是一个简单易于使用的插件，</li>
			</ul>
			<ul style="display:none">
				<li>KandyTabs选项卡以HTML标准及用户体验为指导思想</li>
				<li>有7种效果2种样式可供选择。tabSwitch可以自动或手动播放每一个tab/slide。</li>
				<li>wdScrollTab is a tab panel which has ability to scroll for tabs that do not fit on the page</li>
				<li>A simple jquery plugin that does auto tab</li>
			</ul>
		</div>
	</div>
css:
	* { margin:0; padding:0; }
	ul { list-style:none; }
	body { color:#333; font-size:12px; }
	
	#tabs { margin:100px auto auto auto; width:500px; }
	#tabs .tab_title { width:500px; }
	#tabs .tab_title ul { width:500px; overflow:hidden; zoom:1; }
	#tabs .tab_title ul li { float:left; margin-right:2px; width:80px; height:26px; background-color:#EEE; border:1px solid #DDD; border-bottom:none; line-height:26px; text-align:center; }
	#tabs .tab_title ul .li_curr { background-color:#FFF; }
	#tabs .tab_content { padding:4px; width:490px; border:1px solid #DDD; border-top:none; }
	#tabs .tab_content ul { padding:0 5px; width:480px; height:140px; }
	#tabs .tab_content ul li { width:480px; height:28px; line-height:28px; overflow:hidden; }
js:
	$( function() {
		$('#tabs').wTabs();
	});
 */

( function($) {
	$.fn.wTabs = function() {
		var li_curr = 'li_curr';
		//定义当前标签样式
		var curr_index = 0;
		//当前激活标签序号
		
		var tab_title = $('div:eq(0)', this);
		var tab_content = $('div:eq(1)', this);
		//定义对象
		
		$('ul li', tab_title).mouseover( function(){
			curr_index = $(this).index();
			//定义当前索引
			$('ul li', tab_title).removeClass(li_curr);
			$(this).addClass(li_curr);
			//激活当前标签
			$('ul', tab_content).hide();
			$('ul:eq('+curr_index+')', tab_content).show();
			//显示当前内容
		});
	}
})(jQuery);