`
Franciswmf
  • 浏览: 800108 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery ui tab ajax 切换,默认选中第一个(序号为0)

 
阅读更多
   <script>
	$(function() {
		var tabss = $('#tabs').tabs();//[object,object]
		var selectedTab = tabss.tabs('option', 'selected');
		if(0==selectedTab){
			 $.ajax({
	    	        url: "<%=basePath %>TopicSectionServlet.serv",
	    	        type: "post",
	    	        data: "key=" + name + "&doaction=check",
	    	        dataType: "json",
	    	        error:function(){
	    	        	//dealFail();
	    	        	alert('fail');
	    	        },
	    	        success: function (data) {
	    	        	$("#atab2").html("成功-按部门1111");
	    	        }
	    	    });
		}
		$("#tabs").tabs({
			  select: function(event, ui) {
				  var name='5b92ed07-ba11-4d3d-bb6b-f642be25d46a';
				  var htmlStr = "";
				  if (ui.index == 0) {
					  $.ajax({
			    	        url: "<%=basePath %>TopicSectionServlet.serv",
			    	        type: "post",
			    	        data: "key=" + name + "&doaction=check",
			    	        dataType: "json",
			    	        error:function(){
			    	        	//dealFail();
			    	        	alert('fail');
			    	        },
			    	        success: function (data) {
			    	        	$("#atab2").html("成功-按部门1111");
			    	        }
			    	    });
			  }
				  //
				  if (ui.index == 1) {
					  $.ajax({
			    	        url: "<%=basePath %>TopicSectionServlet.serv",
			    	        type: "post",
			    	        data: "key=" + name + "&doaction=check",
			    	        dataType: "json",
			    	        error:function(){
			    	        	//dealFail();
			    	        	alert('fail');
			    	        },
			    	        success: function (data) {
			    	        	$("#btab2").html("成功-按部门2222");
			    	        }
			    	    });
				  }
				  //
				   if (ui.index == 2) {
					   $.ajax({
			    	        url: "<%=basePath %>TopicSectionServlet.serv",
			    	        type: "post",
			    	        data: "key=" + name + "&doaction=check",
			    	        dataType: "json",
			    	        error:function(){
			    	        	//dealFail();
			    	        	alert('fail');
			    	        },
			    	        success: function (data) {
			    	        	$("#ctab2").html("成功-按部门3333");
			    	        }
			    	    });
				  }
				  //
				   if (ui.index == 3) {
					   $.ajax({
			    	        url: "<%=basePath %>TopicSectionServlet.serv",
			    	        type: "post",
			    	        data: "key=" + name + "&doaction=check",
			    	        dataType: "json",
			    	        error:function(){
			    	        	//dealFail();
			    	        	alert('fail');
			    	        },
			    	        success: function (data) {
			    	        	$("#dtab2").html("成功-按部门4444");
			    	        }
			    	    });
				  }
				  //
				   if (ui.index == 4) {
				    		$.ajax({
				    	        url: "<%=basePath %>TopicSectionServlet.serv",
				    	        type: "post",
				    	        data: "key=" + name + "&doaction=check",
				    	        dataType: "json",
				    	        error:function(){
				    	        	//dealFail();
				    	        	alert('fail');
				    	        },
				    	        success: function (data) {
				    	        	$("#etab2").html("成功-按部门5555");
				    	        }
				    	    });
				  }
				  //
				 }
			});
	});
	</script>


//
				  if (ui.index == 1) {
						//加载版块数据
					  $.ajax({
			    	        url: "<%=basePath %>TopicServlet.serv",
			    	        type: "post",
			    	        data: "key=" + name + "&doaction=statisticsBySectionId",
			    	        dataType: "json",
			    	        error:function(){
			    	        	alert('数据加载失败!');
			    	        },
			    	        success: function (data) {
			    	         var len=data.length; 
			    	         //所有版块
					         $('#sectionName-s').contents().remove();  
					         $('<option >请选择</option>').appendTo('#sectionName-s'); 
					         for(i=0;i<len;i++){ 
					        	 $("#sectionName-s").append($('<option value='+data[i].tsb.id+'>'+data[i].tsb.sectionName+'</option>'));
					         } 
					         //所有数据
			    	        	$("#btab2").html("成功-按部门2222");
			    	        }
			    	    });
				  }
分享到:
评论

相关推荐

    jquery tab切换,jquery tab切换,jquery tab切换,jquery tab切换

    jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...

    jquery.ui.autocomplete-Ajax

    jQuery UI的Autocomplete组件是一个强大的功能,它允许用户在输入时自动填充建议选项,极大地提高了用户体验。这个组件尤其适用于搜索框、表单输入和其他需要动态获取数据的场景。在本篇中,我们将深入探讨jQuery UI...

    jQuery 实现tab切换效果

    首先,我们需要隐藏所有Tab内容,并显示第一个Tab: ```javascript $(document).ready(function() { $('.tabContent').hide(); // 隐藏所有Tab内容 $('#tab1').show(); // 显示第一个Tab内容 }); ``` 然后,为...

    jQuery实现简单tab切换

    // 默认显示第一个Tab $('.content').first().show(); $('.tabs li a').first().addClass('active'); // 监听Tab按钮点击事件 $('.tabs li a').click(function(e) { e.preventDefault(); // 阻止a标签的默认...

    Jquery实现tab切换

    // 默认显示第一个Tab $('#tabs ul li:first-child a').click(); }); ``` 在这个示例中,我们使用`$(document).ready()`来确保在页面加载完成后执行我们的JavaScript代码。`$('#tabs ul li a')`选择所有的Tab标题...

    jquery渐变切换tab标签

    同时,为切换效果设置初始和目标颜色,可以使用CSS的`transition`属性实现平滑过渡。 3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只...

    JQuery UI 中文帮助文档

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI的详细指南,旨在帮助开发者更好地...

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    jquery ui messager 消息框

    jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...

    jQuery带tab切换搜索框样式代码

    本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框,该搜索框集成了选项卡切换功能,为用户提供更便捷的交互体验。以下是对这个主题的详细讲解: 1. **jQuery基础**:首先,...

    JQuery UI 实现Ajax提交详细步骤

    在Web开发中,JQuery UI是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括对话框、拖放功能、日期选择器等。DWZ(Dynamic Web Zone)则是一个基于jQuery UI的前端框架,主要用于构建富交互式的Web应用。...

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jquery滑动切换tab

    在网页设计中,用户体验是一个至关重要的因素,而jQuery滑动切换tab功能则是一种常见的交互设计方式,能够提高用户的浏览和操作体验。这个功能允许用户通过鼠标悬停在不同的选项卡上,实现内容区域的平滑过渡,使得...

    jQuery Tab页切换

    在网页设计中,jQuery Tab页切换是一种常见的交互元素,它能有效地组织和展示大量内容,让用户以简洁的方式浏览和切换不同的部分。这个“jQuery Tab页切换”资源包含JS(JavaScript)和CSS(Cascading Style Sheets...

    jQuery纵向tab选项卡内容切换代码.rar

    jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡...

    有ajax,jquery实现tab效果

    在`tab+ajax`的压缩包文件中,可能包含了一个示例代码或者模板,用于演示如何使用Ajax和jQuery实现Tab效果。解压后,你可以查看其中的HTML、CSS和JavaScript文件,学习并理解其工作原理。此外,可能还包含了详细的...

    jQuery全屏TAB页面切换代码.zip

    本项目“jQuery全屏TAB页面切换代码”利用jQuery的特性实现了一个全屏页面切换的效果,适用于创建现代、响应式的网页布局。 在网页设计中,选项卡(Tab)布局是一种常见的信息展示方式,它可以有效地组织内容,使得...

    jquery写的tab切换的插件

    在网页设计中,Tab切换是一种常见的用户界面元素,它允许用户在不同的内容面板间进行切换,而无需加载新的页面。这种交互方式提高了用户体验,减少了页面的混乱感。本篇文章将详细探讨基于jQuery编写的Tab切换插件,...

    jQuery UI组件 jQuery UI

    1. **Tabs(选项卡)**:jQuery UI 提供了方便的选项卡组件,可以将内容分隔成多个部分,通过选项卡切换显示,提高网页的组织性和用户体验。 2. **Accordion(手风琴)**:手风琴组件允许内容以折叠/展开的方式呈现...

    jquery ajax tab选项卡.zip

    这个"jquery ajax tab选项卡.zip"文件包含了一个利用jQuery和AJAX技术实现的选项卡切换功能,允许用户在不刷新整个页面的情况下,动态加载和切换不同的内容区域。 首先,我们来了解一下jQuery。jQuery是一个强大的...

Global site tag (gtag.js) - Google Analytics