关于样式切换的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>{dede:global.cfg_webname/}</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=keywords content={dede:global.cfg_description/}>
<META name=description content={dede:global.cfg_keywords/}>
<link href="{dede:global.cfg_templeturl/}/default/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/move.js"></script>
<script language="javascript" type="text/javascript">
var lastObj=null;
var lastIdx=1;
function test(obj,idx){
 if(!lastObj){
  lastObj = document.getElementById("test");
  lastIdx = 1;
 }
 
 lastObj.className = "new"+lastIdx;
 var old = document.getElementById("list"+lastIdx);
 if(old)old.style.display="none";
 
 obj.className = "class"+idx;
 var n = document.getElementById("list"+idx);
 if(n)n.style.display="block";
 
 lastObj = obj;
 lastIdx = idx;
 
}
</script>
<style type="text/css">
 .class1{color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px;}
 .new1{color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px; }
 .class2{ color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px;}
 .new2{ color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px;}
 .class3{ color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px;}
 .new3{ color:#fff; background:url(../images/son_menuon.jpg) no-repeat; height:32px; width:270px; display:block; text-decoration:none; padding-left:60px; line-height:32px;}
</style></head><body>
<div class="box"><!--//top--><!--banner-->

<div class="clear"></div>
<div class="son_txt"><!--//son_txttop-->
  <div class="son_txtcon">
<div class="son_left left">
<div class="son_menu">
<ul>
<li><A href="{dede:type typeid='15'}[field:typelink /]{/dede:type}" class="class1"  id="test" onclick="test(this,1)">Դ</A></li>
<li><A href="{dede:type typeid='16'}[field:typelink /]{/dede:type}" class="new2" onclick="test(this,2)"></A></li>
<li><A href="{dede:type typeid='17'}[field:typelink /]{/dede:type}" class="new3" onclick="test(this,3)">˾</A></li>
</ul>
</div><!--//son_menu-->
<div class="left_mess">
<div class="left_mess_log"></div><!--//i_news_log--><!--//i_news_mid-->
    <div class="clear"></div>
             <div class="left_mess_bot"></div><!--//i_news_bot-->
</div><!--//left_mess-->
</div><!--//son_left-->
<div class="son_right right"><!--//son_rtitile--><!--//news_txt-->
      <div class="run left"></div>                <!--//run-->
</div><!--//son_right-->
</div><!--//son_txttop-->
<div class="clear"></div>
<div class="son_txtbot"></div><!--//son_txttop-->
</div><!--//son_txt-->
</body>
</html>这是我的代码  我想问的是 我点击完后怎么固定住那个样式  
我单独的提取出 JS的方法是可以用的  
但是在这里面用不了    切换后样式没有固定住
请大家帮我看看

解决方案 »

  1.   

    没太理解，如果是固定风格的话那么将你的风格类型写入cookie即可 下次读cookie变量 然后再读取相应的风格代码就可以了。
      

  2.   

    我放个原来的代码吧<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script language="javascript" type="text/javascript">
    var lastObj=null;
    var lastIdx=1;
    function test(obj,idx){
     if(!lastObj){
      lastObj = document.getElementById("test");
      lastIdx = 1;
     }
     
     lastObj.className = "new"+lastIdx;
     var old = document.getElementById("list"+lastIdx);
     if(old)old.style.display="none";
     
     obj.className = "class"+idx;
     var n = document.getElementById("list"+idx);
     if(n)n.style.display="block";
     
     lastObj = obj;
     lastIdx = idx;
     
    }
    </script>
    <style type="text/css">
     .class1{ color:#FF0000}
     .new1{ color:#996633}
     .class2{ color:#FF0000}
     .new2{ color:#996633}
    </style>
    <title>无标题文档</title>
    </head><body>
    <a href="#" class="class1"  id="test" onclick="test(this,1)">list1</a>
    <a href="#" class="new2" onclick="test(this,2)">list2</a>
    </body>
    </html>
      

  3.   

    cookie此问题与 php 无关
      

  4.   

    cookie 正解，不过要是浏览器屏蔽了cookie咋办
      

  5.   

    这个可以用jquery操作cookie来实现的，搜索一下有现成的代码可用。