iframe中jquery点击左边后台动态加载的树 右面上面追加添加tab标签栏
请前端大神改改下面这段代码用jquery怎么点击树节点后顶部添加tab标签栏？就是添加代码里<divclass="topMenu">里面的a标签还可以关闭的那种。现在的效...
请前端大神 改改下面这段代码 用jquery怎么点击树节点后 顶部添加tab标签栏？就是添加代码里<div class="topMenu"> 里面的a标签 还可以关闭的那种。
现在的效果是点击左边的树后 是在同一个tab标签栏上切换了下标题名字 想改成新增tab标签栏怎么做?
<body>
<div class="container">
<div class="header">
<div><a href="#" class="logo"><img src="" alt="" align="absmiddle"/>管理系统</a></div>
<div class="topRight">
<!-- -->
</div>
<div class="topMenu">
<a href="#" class="tm_on" id="tm_first">首页</a>
<!-- <a href="#">管理</a>
<a href="#">管理</a>
<a href="#">管理</a> -->
<a href="#"><span>系统管理</span><i></i></a>
</div>
</div>
<div class="content"> <!-- 后台查询动态生成树-->
<div class="left">
<ul class="menu">
<c:forEach items="${list}" varStatus="menuIndex" var="menu">
<li>
<a href="#"><em class="e6"></em>${menu.text}<i></i></a>
<div class="subMenu">
<c:forEach items="${menu.children}" varStatus="mIndex" var="m">
<a href="${path}${m.attributes}" target="main"><u></u>${m.text}</a>
</c:forEach>
</div>
</li>
</c:forEach>
</ul>
</div>
<div class="righpad">
<iframe <%-- src="${path}/login.html" --%> name="main" id="main" frameborder="0" style="height: 100%; width: 100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="${path}/res/js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu li>a").click(function(){
var myobj=$(this).parent();
myobj.addClass("menu_on").siblings().removeClass("menu_on");
myobj.find(".subMenu").slideDown().parent().siblings().find(".subMenu").slideUp ();
});
$(".subMenu a").each(function(index){
$(this).attr("data-index", index);
}).on("click", function(){
var $this = $(this),
index = $this.attr("data-index"),
$menuItem = $(".topMenu [data-index=" + index + "]");
$this.addClass("subMenu_on").siblings().removeClass("subMenu_on");
$(".topMenu a:last-child span").text($(this).text());
$menuItem.trigger("click"); // 触发菜单的点击事件
});
$(".topMenu").on("click", "a", function(){
$(this).addClass("tm_on").siblings().removeClass("tm_on");
});
$(".topMenu").on("click","i",function(){
$(this).parent("a").remove();
window.location.href="${path}/";
});
$(".trHelp").click(function(){
$(".tips").toggle();
});
});
</script>
</body> 展开
现在的效果是点击左边的树后 是在同一个tab标签栏上切换了下标题名字 想改成新增tab标签栏怎么做?
<body>
<div class="container">
<div class="header">
<div><a href="#" class="logo"><img src="" alt="" align="absmiddle"/>管理系统</a></div>
<div class="topRight">
<!-- -->
</div>
<div class="topMenu">
<a href="#" class="tm_on" id="tm_first">首页</a>
<!-- <a href="#">管理</a>
<a href="#">管理</a>
<a href="#">管理</a> -->
<a href="#"><span>系统管理</span><i></i></a>
</div>
</div>
<div class="content"> <!-- 后台查询动态生成树-->
<div class="left">
<ul class="menu">
<c:forEach items="${list}" varStatus="menuIndex" var="menu">
<li>
<a href="#"><em class="e6"></em>${menu.text}<i></i></a>
<div class="subMenu">
<c:forEach items="${menu.children}" varStatus="mIndex" var="m">
<a href="${path}${m.attributes}" target="main"><u></u>${m.text}</a>
</c:forEach>
</div>
</li>
</c:forEach>
</ul>
</div>
<div class="righpad">
<iframe <%-- src="${path}/login.html" --%> name="main" id="main" frameborder="0" style="height: 100%; width: 100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="${path}/res/js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu li>a").click(function(){
var myobj=$(this).parent();
myobj.addClass("menu_on").siblings().removeClass("menu_on");
myobj.find(".subMenu").slideDown().parent().siblings().find(".subMenu").slideUp ();
});
$(".subMenu a").each(function(index){
$(this).attr("data-index", index);
}).on("click", function(){
var $this = $(this),
index = $this.attr("data-index"),
$menuItem = $(".topMenu [data-index=" + index + "]");
$this.addClass("subMenu_on").siblings().removeClass("subMenu_on");
$(".topMenu a:last-child span").text($(this).text());
$menuItem.trigger("click"); // 触发菜单的点击事件
});
$(".topMenu").on("click", "a", function(){
$(this).addClass("tm_on").siblings().removeClass("tm_on");
});
$(".topMenu").on("click","i",function(){
$(this).parent("a").remove();
window.location.href="${path}/";
});
$(".trHelp").click(function(){
$(".tips").toggle();
});
});
</script>
</body> 展开
1个回答
展开全部
$(".menu li>a").click(function(){
var myobj=$(this).parent();
myobj.addClass("menu_on").siblings().removeClass("menu_on");
myobj.find(".subMenu").slideDown().parent().siblings().find(".subMenu").slideUp ();
在这一行下面，把菜单追加到topMenu里
$('.topMenu').append('<a href="'+$(this).attr("herf")+'"><span>$(this).text()</span><i></i></a>');
});不过追上加上去的菜单是没有绑定事件的，你再选择新加的这个节点，加上点击事件
$('.topMenu a').last().click(function(){
//处理点击事件
});
追问
追加到topMenu里后的效果变成了 点击左边 根菜单 也就是最外面的父节点 可以追加 点击叶子菜单（子节点）就还是在原来的上面换了下标题
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
