Jquery UI 获取选中的tab Index

最新推荐文章于 2023-04-11 08:46:50 发布

Jasonfang0118

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量4.2k

点赞数

分类专栏： WebJs 文章标签： jquery ui tab

本文链接：https://blog.youkuaiyun.com/rudyn/article/details/53095813

版权

WebJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JQuery的Tabs插件实现选项卡切换并刷新对应的IFrame页面。通过getSelectedTabIndex获取当前选中Tab的索引，并根据不同Tab设置IFrame的src和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面加载中需要对tab进行初始化，同时要注册了active属性的处理函数：

	$( function() {
		$( "#tabs" ).tabs({
		  activate: function( event, ui ){
			refresh_ifr_page();
		  }
		});		
	} );

function getSelectedTabIndex()
{
	var retIndex = $("#tabs").tabs('option', 'active');
		
	//alert("retIndex="+retIndex);
	
	return retIndex;
}

function refresh_ifr_page()
{	
	var src_value,heightVal;
	var cur_selected_tab_id = getSelectedTabIndex();
	
	//id=0, status
	//id=1, networking
	//id=3, security
	//id=4, application
	//id=5, management
	//id=6, diagnoistic
	//id=7, help
	if (cur_selected_tab_id < 0 || cur_selected_tab_id > 6){
		alert("Invalid tab option id "+cur_selected_tab_id+" !!");
		return;
	}
	......
	//set iframe src value
	$("#main_ifr").attr("src",src_value);
	$("#main_ifr").attr("height",heightVal);
}

最新Jquery 使用activate属性作为TAB是否选中的标志。