需求:
一个页面, 左边为菜单栏, 右边为一个iframe,通过点击左边的菜单,iframe载入对应的页面.同时对选中的菜单添加css选择效果
代码
<div id="leftmenu" class="menu">
<ul style="overflow: visible;" id="menu_index">
<li><a target="main" hidefocus="true" href="main.html" class="selected">管理中心首页</a></li>
<li><a target="main" hidefocus="true" href="list.html" class="">列表显示</a></li>
<li><a target="main" hidefocus="true" href="" class="">商品管理</a></li>
<li><a target="main" hidefocus="true" href="" class="">公告管理</a></li>
</ul>
<ul style="display:none" id="menu_global">
<li><a target="main" hidefocus="true" href="form1.html">表单控件1</a></li>
<li><a target="main" hidefocus="true" href="form1.html">表单控件2</a></li>
</ul>
</div>
选中管理中心首页后对a标价添加名为selected的css, 选中其他项则为该项添加该css, 同时移除其他菜单的selected css, 本来可以通过对li或者a添加id来实现, 然后对a添加click事件很简单就可以实现, 但是如果是菜单不固定, 或者菜单太多相对来说就会比较麻烦.但是要是硬是这样实现, 由于很久没接触jquery了, 所以可能是我跟不上时代了,呵呵,搞了半天, 以下为实现代码, 在载入时绑定.
$(function(){
$('#leftmenu a').click(function(){
$('#leftmenu a').each(function() {
$(this).removeClass('tabon');
});
$(this).addClass('tabon');
});
})
我纠结在了第一句, 每次都想each, 结果把我each进去了, 然后发现可以直接对$('#leftmenu a') click(囧), 遍历删除目前的css, 然后对click项添加css就OK了. 嗨, 郁闷.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。