日期:2014-05-16  浏览次数:20329 次

用css+js做了个选项卡,选项卡中触发action后防刷新
css:

boxNav ul{
 padding:0;
  margin:0;
}
.boxNav ul li{
width:150px; 
border:none;
list-style:none;
float:left;
cursor:pointer; 
text-align:left;
font-size:20px;
}
.boxContent{
width:800px; 
height:400px;

}
.see{
display:block;
}
.nosee{
display:none;
}
.normaltab{
color:#FF0000;
background-color:#FFFFFF;
display:block;
}
.hovertab{
color:#444444; 
font-weight:400;
 display:block; 
 background-color:#CCCCCC;
}


jsp页面:


<div class="box">
 <div class="boxNav" id="boxNav"><!--选项卡部分-->
  <ul>
   <li id="boxNav1" class="hovertab" onclick="clickNav(1)">标签1</li>
   <li id="boxNav2" class="normaltab" onclick="clickNav(2)">标签2</li>
   <li id="boxNav3" class="normaltab" onclick="clickNav(3)">标签3</li>
   <li id="boxNav4" class="normaltab" onclick="clickNav(4)">标签4</li>
  </ul>
 </div>
 <div class="boxContent">
  <div class="see" id="boxContent1"><!--第一个标签里的内容--></div>
  <div class="nosee" id="boxContent2"><!--第二个标签里的内容-->在这里触发了一个action</div>
  <div class="nosee" id="boxContent3"><!--第三个标签里的内容--></div>
  <div class="nosee" id="boxContent4"><!--第四个标签里的内容--></div>
</div>
</div>



js:

function $(id){return document.getElementById(id);}
function clickNav(n){
 for(i=1;i<=4;i++){
 $('boxNav'+i).className='normaltab';
 $('boxContent'+i).className='nosee';
  }
 $('boxNav'+n).className='hovertab';
 $('boxContent'+n).className='see';
}



这个action是一个分页查询的action,结果已经显示在页面上,只是点击上一页下一页或者跳转到多少页的时候,会跳到第一个选项卡那里。网上说可以用js来写cookie记录,但具体怎么做不是很清楚。
------解决方案--------------------
你就把n存在cookie就好了
------解决方案--------------------
加载页面的时候去取那个值,然后根据该值设定对应的元素,或者你使用局部无刷新处理方式,只刷新列表的数据,可以使用jquery的load方法也可以使用ajax