easyui的tab选项卡显示与切换

笔者初学java，而且是直接跟着项目跳向spring MVC学习 ，工作前几年全部是写C#。java水平也就在大学学完基础java之后。

目前直接开始搞，可能会有点吃力，但是也提升了自己。今天记录一下学到的easyui的tab选项卡问题。

界面设计是点击左侧导航栏中的某一项，跳向与之对应的tab选项卡。界面只显示当前选项卡，其余选项卡不显示。

开始百度的时候很多解决方案，但是都不太适用自己的这种，于是多种解决办法学习了一部分相结合了。

首先是选项卡的显示及隐藏、easyui-tabs的隐藏。然后就是关于选项卡索引的问题，此稍后解释一下。

前台代码

<div  id="show" class="easyui-tabs cs" data-options="fit:true,border:false,plain:true" style="display:none">
<div id="a" title="标签1" style="padding: 5px;"></div>
<div id="b" title="标签2" style="padding: 5px;" ></div>

后台JS代码

$('#show').tabs('getTab',"标签1").panel('options').tab.hide();
$("#a").hide();
$('#show').tabs('getTab',"标签2").panel('options').tab.show();
$("#b").show();

重点来了，但你这样完成后，点击按钮1，触发onclick事件，触发js代码之后是可以完整显示标签1及标签1的下属内容。点击标签2，是空白一片，进入F12开发者模式也是会显示 <div class="panel htop " id="a" style="width:930px"> <div id="b"  class="panel htop " style="display:none">。

很奇怪为什么同样的class style却不一样了，竟然是display:none

笔者研究半天，把所有的代码注释掉回到最原始的，忽然发现这个问题的原因是，但你点击按钮2，tab选项卡此处还是默认选择选项卡1，所以选项卡2的style是display:none。

知道了原因就可以修改了，如下

$("#show").tabs('select',tabIndex); //第二个参数是页签索引
$("#show").tabs('select','myTab1'); //第二个参数是页签title

把点击第二个按钮时候的焦点或者说默认选项改成选项卡2，就可以完整显示选项卡2了，其实2的内容早已显示，只不过默认选项1，选项2被隐藏了。

此时，问题全部解决。

本人初学者，用的笨办法，如果有大神看到可以帮忙指点一下，想学习最快最简单的方法。