jquery切换标签时的样式的变换

       在适应的项目应用当中，经常会有标签的切换时触发样式的选择，UI经常忙的不可开交，有时候项目太急，只能自己上阵，于是自己也总结一下期间遇到的问题，进行梳理，以便以后加深了解。

      最终的实现效果如下：

     

效果图如上，重复点击时，相关的进行改变。

     其中，任务、审批为一级菜单，对应的样式如下：

             <div class="nav-autolis j_baseautolis menu-wrap-title">
                       <li acl-module-id="1" class="menu-wrap-titem active">
                       <a class="router j_modnav-task" href="javascript:void(0);" data-url="/tasks" >    <!-- onClick="goTask();" -->
                              <i class="graph graph-task"></i>
                              <span>任务</span>
                       </a>
                       </li>
                      <li acl-module-id="2" class="menu-wrap-titem">
                      <a class="router j_modnav-workflow" href="javascript:void(0);" data-url="/workflows">
                             <i class="graph graph-flow"></i>
                             <span>审批</span>
                      </a>
                      </li>
             </div>

     

     对应的js 如下：

function menuwrapshowTab(){
		
		$(".menu-wrap-title").delegate(".menu-wrap-titem", "click", function(){
			var obj = $(this);
			obj.addClass("active").siblings(".menu-wrap-titem").removeClass("active");
			
			//第一个 默认 移除隐藏 - 即显示
			$(".leftM_nav",parent.document).eq(obj.index()).removeClass("hide");
			$(".leftM_nav",parent.document).eq(obj.index()).siblings($(".leftM_nav",parent.document)).addClass("hide");
			
			$(".leftM_nav",parent.document).eq(obj.index()).find('.cs-p').addClass("on");
			$(".leftM_nav",parent.document).eq(obj.index()).find('.sub-nav').addClass("show");
			$(".leftM_nav",parent.document).eq(obj.index()).siblings($(".leftM_nav",parent.document)).addClass("hide");
	
			//二级菜单
			var href = $(".leftM_nav",parent.document).eq(obj.index()).find('.active').find('a').attr('href');
			
			if(href=="javascript:void(0);"){
				var clickObj = $(".leftM_nav",parent.document).eq(obj.index()).find('.active').find('a');
				
				clickObj.click();
			}else{
				$("#frmright",parent.document).attr("src",href);  
			}
			
		});
	}
	menuwrapshowTab();

   jquery的 delegate 方法说明：

       

        delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

        使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

   jquery 的.siblings方法说明

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

语法

.siblings(selector)

参数	描述
selector	字符串值，包含用于匹配元素的选择器表达式。

这里说明如下：

      为元素menu-wrap-title指定子元素menu-wrap-titem点击事件。

      为点击的该事件增加移入的效果 active,同时为除去点击该按钮之外的其他相同元素移除active样式。

以上，记录一下，以便后期再此使用留有记录。