对li进展选值，并加亮

JS
function switchTab(mark,index,count) {
var curTab = document.getElementById("tab_"+mark+index)
var curList = document.getElementById("list_"+mark+index)
for(var i=0;i<=count;i++) {
var tabObj = document.getElementById("tab_"+mark+i) ;
var listObj = document.getElementById("list_"+mark+i) ;
if (i != index) {
if (tabObj) {tabObj.className = "";}
if (listObj) {listObj.style.display = "none" ;}
}
}
if (curTab) {curTab.className = "zc_on" ;}
if (curList) {curList.style.display = "block" ;
curTab.className="GoodTab"}
return false;
}

JSP

tab_XX

<li onclick="switchTab(3,1,7)" id="tab_31" class="zc_on">集成平台</li>
??????????? <li onclick="switchTab(3,2,7)" id="tab_32">结构形态</li>
??????????? <li onclick="switchTab(3,3,7)" id="tab_33">网络频率</li>
??????????? <li onclick="switchTab(3,4,7)" id="tab_34">屏幕大小</li>
<%--??????????? <li onclick="switchTab(3,5,7)" id="tab_35">屏幕材质</li>--%>
??????????? <li onclick="switchTab(3,6,7)" id="tab_36">摄像头</li>
??????????? <li onclick="switchTab(3,7,7)" id="tab_37">多媒体</li>

<div class="layout_h200" id="list_31" style="display:block;">
??????? <div class="layout_im_r">
???????????? <ul>
<li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="2401001" />MTK6223A</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401004'" />MTK6225</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401006'" />MTK6235</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401005'" />MTK6236 </li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401007'" />MTK6253</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401010'" />展讯6600</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401015'" /> 展讯6610</li>
???????????? <li style="width:99%; float:left"><input type="radio" name="goodsInfoVO.platForm" value="'2401016'" />展讯6620 </li>
???????????? </ul>
?????????? </div>
???????? </div>
?????

list_xx
??????? <div class="layout_h200" id="list_32" style="display:none;">
?????????? <div class="layout_im_r">
???????????? <ul>
<li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901001'" />直 板</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901002'" />普通翻盖</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901003'" />滑 盖</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901004'" />翻盖旋屏</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901005'" />侧滑</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'83901008'" />PDA</li>
???????????? <li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901006'" />侧翻 </li>
<li style="width:99%; float:left">
<input type="radio" name="goodsInfoVO.structure" value="'3901007'" />QWERT键盘 </li>
???????????? </ul>
?????????? </div>
???????? </div>

?

点击后可以对不同的选项进行切换

?