是想实现一个条件的选择效果
比如
条件1 链接1 链接2 链接3
条件2 链接1 链接2 链接3在这两个条件选择了的条件就改变背景颜色是单选
应该怎么实现好呢

解决方案 »

  1.   


    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script language="javascript">
    function init(){
    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++){
    if(divs[i].className.indexOf("special") >= 0){
    divs[i].onclick = doClick;
    }
    }
    }

    function doClick(){
    //this
    var r = this.className.split(' ')[1];
    var c = this.className.split(' ')[2];

    var divs = document.getElementsByTagName("div");
    for(var i =0; i < divs.length; i++){
    if(divs[i].className.indexOf(r) >= 0){
    if(divs[i].className.indexOf(c) >= 0){
    divs[i].style.backgroundColor = "#CCC";
    }else{
    divs[i].style.backgroundColor = "#FFF";
    }
    }
    }
    }
    window.onload = init;/* 以下为jquery写法
    function init1(){
    $(".special").click(doClick1);
    }

    function doClick1(){
    //var c = $(this).attr('class').split(' ')[2];
    var r = $(this).attr('class').split(' ')[1];

    $("." + r).css('background-color', '#FFF');
    $(this).css('background-color', "#ccc");
    }

    $(document).ready(init1);

    */
    </script>
    </head>
      <body>
    <div id="New">
    条件1<div class="special row1 col1">a1</div><div class="special row1 col2">b1</div><div class="special row1 col3">c1</div>
    条件2<div class="special row2 col1">a2</div><div class="special row2 col2">b2</div><div class="special row2 col3">c2</div>
    </div>
    <script type="text/javascript">
    //init();
    </script>
      </body>
    </html>