需求:
一個頁面, 左邊為功能表列, 右邊為一個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了. 嗨, 鬱悶.
