jQuery UI-怎么让jquery ui 的菜单控件accordion 选中后高亮显示，页面不去刷新，在我式样下

Question

<ul id="navigation">
 <li>
  <a class="head" id="head1" href="#">Guitar</a>
  <ul>
   <li><a id="11" href="#">Electric</a></li>
    <li><a id="12" href="#">Acoustic</a></li>
    <li><a id="13" href="#">Amps</a></li>
    </ul> 
    </li>
    <li>
    <a class="head" id="head2" href="#">Bass</a>
    <ul>
     <li><a id="14" href="#">Effects A</a></li>
     <li><a id="15" href="#">Effects B</a></li>
    <li><a id="16" href="#">Effects C</a></li>
    <li><a id="17" href="#">Effects D</a></li>
    <li><a id="18" href="#">Accessories</a></li>
    </ul> 
    </li>
</ul> 格式是这样的，我的样式文件的格式如下，我怎样才能做到菜单选中以后，高亮显示，页面不刷新

li { list-style-type: none; }
.basic, #list2, #list3, #navigation { width:auto; }
#navigation {
    border:1px solid #5263AB;margin:0px;padding:0px;text-indent:0px;
    width:auto;font-family: verdana;font-size: 12px;}
#navigation a.head {
    color:#000000;display:block;text-indent:10px;
    text-decoration: none;padding: 4px 30px;
    background: #5263AB url(title.gif) repeat-x;}
#navigation a.selected {
    background: #5263AB url(title.gif) repeat-x;
}
#navigation a.current {
    background-color:#FFFF99;
}
#navigation ul {
    border-width:0px;margin:0px;
    padding:0px;text-indent:0px;
}
#navigation li {
    list-style:none outside none; display:inline;
}
#navigation li li {
    border-bottom:1px solid #f5f5f5;    display:block;}
#navigation li li a {
    color:#000000;display:block;text-indent:10px;text-decoration: none;
    padding: 4px 30px;background: #ffffff;
    border-bottom: 1px solid #f5f5f5;}
#navigation li li a:hover {
    background : #FFFFA5 url(linkarrow.gif) no-repeat right center;
}

Answer 1

简单的方法有2个：

1.写好一个高亮的class，然后捕获<li>标签的点击事件，清除掉其他标签上的高亮分类，给这条加上高亮（注意CSS优先级）；

2.直接查看accordion化之后选中状态下的<li>标签比未选中的标签多了哪些class属性，然后直接在CSS里面对应的写上效果就行了。