在适应的项目应用当中,经常会有标签的切换时触发样式的选择,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样式。
以上,记录一下,以便后期再此使用留有记录。