高手帮我看看这种切换的功能怎么来写.

当点击 "点击切换简洁版式"的时候显示蓝色,  就切换到"返回传统版式",然后点击"返回传统版式",就显示红色和"点击切换简洁版式".
怎么让它一直这样循环啊?
<!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 content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>无标题文档</title>
<style type="text/css">
      #kb_link{position:absolute;left:300px;top:50px;cursor:pointer;}
  #red{background:red;padding:8px;}
  #blue{ background:blue;padding:8px;}
</style></head>
<body>
<div id="kb_link">点击切换简洁版式<a href="">sd</a></div>
<div id="red"></div>
<div id="blue" style="display:none"></div>
<script type="text/javascript">
     
function removeLinks(){
     var kb_links = document.getElementById("kb_link");
     var removelink = kb_links.getElementsByTagName("a")[0];
     kb_links.removeChild(removelink);
     kb_links.lastChild.nodeValue = "点击切换简洁版式";
}
removeLinks();
        function kb_link(){
        var kb_link = document.getElementById("kb_link");
kb_link.onclick = function(){
document.getElementById("red").style.display = "none";
document.getElementById("blue").style.display = "block";
this.lastChild.nodeValue = "返回传统版式";
this.style.left = "880px";
this.onclick = function(){
    
} }
     }
kb_link()
</script>
</body>
</html>

解决方案 »

  1.   

    function kb_link(){
            var kb_link = document.getElementById("kb_link");
            kb_link.onclick = function(){
                document.getElementById("red").style.display = "none";
                document.getElementById("blue").style.display = "none";
                var val=this.lastChild.nodeValue;// "返回传统版式";
    if(val=="返回传统版式"){
    this.lastChild.nodeValue= "点击切换简洁版式";
    document.getElementById("red").style.display = "block";
    }else{
    this.lastChild.nodeValue="返回传统版式";
                document.getElementById("blue").style.display = "block";
    }
    //this.style.left = "880px";
            }
         }改这个函数
      

  2.   


    <div id="kb_link">点击切换简洁版式</div>
    <div id="red"></div>
    <div id="blue" style="display:none"></div>
    <script type="text/javascript">
         var isRed = true;
    window.onload=function(){
      document.getElementById("kb_link").onclick=function(){
        isRed =!isRed ;
        this.innerHTML = isRed ?"点击切换简洁版式":"返回传统版式";
        document.getElementById("red").style.display = isRed ?"block": "none";
         document.getElementById("blue").style.display = isRed ? "none": "block";
      };
    };</script>