Onclick类更改不起作用

时间：2015-02-18 16:32:48

标签： javascript html css

更改页面导航颜色的onchange脚本仅适用于第一个div。百年纪念，但不是丹佛。

我从其他来源复制了脚本。

＆＃13;
＆＃13; 
  window.onload = function() {
    setStyles();
  };

function setStyles() {
  ids = new Array('header1', 'header2', 'header3');
  for (i = 0; i < ids.length; i++) {
    document.getElementById(ids[i]).className = 'menu_head2';
    document.getElementById(ids[i]).onclick = function() {
      CngClass(this);
    }
  }
}

function CngClass(obj) {
  var currObj;
  for (i = 0; i < ids.length; i++) {
    currObj = document.getElementById(ids[i]);
    if (obj.id == currObj.id) {
      currObj.className = (currObj.className == 'menu_head2') ? 'menu_head2_active' : 'menu_head2';
    } else {
      currObj.className = 'menu_head2';
    }
  }
}
＆＃13; 
.city {
  float: left;
  margin: 15px;
  padding: 10px;
  width: 270px;
  height: 400px;
  border-bottom: 1px solid black;
}
h2 {
  color: #333333;
  font-size: 30px;
  font-family: Helvetica, sans-serif
}
.menu_head2 {
  color: blue;
  font-size: 18px;
}
.menu_head2_active {
  color: black;
  font-size: 18px
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="city">
  <h2>Castle Rock</h2>
    <iframe width="250" height="250" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Castle+Rock&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>
 
</div>

<div class="city">
  <h2> Centennial </h2>

  <iframe width="250" height="250" scrolling="no" frameborder="no" name="Centennial_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Centennial&#39;+and+col1+in+(&#39;Centennial+Collision+Center&#39;%2C+&#39;CARSTAR+Collision&#39;)+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

  <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Centennial+Collision+Center'%2C+'CARSTAR+Collision')+order+by+col1+asc&tmplt=3&cpr=1"
    target="Centennial_search" id="header1" class="menu_head2"> 1</a> -

    <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Service+King+'%2C+'Kuni+Body+Shop+and+Collision')+order+by+col1+asc&tmplt=3&cpr=1" target="Centennial_search"
    id="header2" class="menu_head2"> 2</a>
  </p>
</div>


<div class="city">
  <h2> Denver </h2>

  <iframe width="250" height="250" scrolling="no" frameborder="no" name="Denver_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Denver&#39;+and+col1+%3D+&#39;ReconLinx+Highlands+Ranch&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

  <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+%3D+'ReconLinx+Highlands+Ranch'+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search" id="header1"
    class="menu_head2"> 1</a> -

    <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+in+('A%26W+Auto+Body+Inc'%2C+'BodyWorks+by+MMI')+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search"
    id="header2" class="menu_head2"> 2</a>
  </p>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您在代码中使用相同的ID。 id应该只在DOM中使用一次。否则getElementById返回第一个元素，其中id在参数中传递，它在DOM中找到。

尝试在代码上指定泛型属性。并使用方法document.querySelectorAll

＆＃13;
＆＃13; 
 window.onload = function() {
        setStyles();
      };

    function setStyles() {
      ids = new Array('header1', 'header2', 'header3');
      for (i = 0; i < ids.length; i++) {
        var x = document.querySelectorAll('[data-foo]');
        console.log(x);
        for (i = 0; i < x.length; i++) {
          x[i].className = 'menu_head2';
          x[i].onclick = function() {
            CngClass(this);
          }
        }
      }
    }

    function CngClass(obj) {
      var currObj;
      for (i = 0; i < ids.length; i++) {
        currObj = document.querySelectorAll('[data-foo]');
        for(i = 0; i < currObj.length; i++) {
          if (obj.getAttribute("data-foo") == currObj[i].getAttribute("data-foo")) {
            currObj[i].className = (currObj[i].className == 'menu_head2') ? 'menu_head2_active' : 'menu_head2';
          } else {
            currObj[i].className = 'menu_head2';
          }
        }
      }
    }
＆＃13; 
    .city {
      float: left;
      margin: 15px;
      padding: 10px;
      width: 270px;
      height: 400px;
      border-bottom: 1px solid black;
    }
    h2 {
      color: #333333;
      font-size: 30px;
      font-family: Helvetica, sans-serif
    }
    .menu_head2 {
      color: blue;
      font-size: 18px;
    }
    .menu_head2_active {
      color: black;
      font-size: 18px
    }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="city">
      <h2>Castle Rock</h2>
        <iframe width="250" height="250" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Castle+Rock&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>
     
    </div>

    <div class="city">
      <h2> Centennial </h2>

      <iframe width="250" height="250" scrolling="no" frameborder="no" name="Centennial_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Centennial&#39;+and+col1+in+(&#39;Centennial+Collision+Center&#39;%2C+&#39;CARSTAR+Collision&#39;)+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

      <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Centennial+Collision+Center'%2C+'CARSTAR+Collision')+order+by+col1+asc&tmplt=3&cpr=1"
        target="Centennial_search" data-foo="header1" class="menu_head2"> 1</a> -

        <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Service+King+'%2C+'Kuni+Body+Shop+and+Collision')+order+by+col1+asc&tmplt=3&cpr=1" target="Centennial_search"
        data-foo="header2" class="menu_head2"> 2</a>
      </p>
    </div>


    <div class="city">
      <h2> Denver </h2>

      <iframe width="250" height="250" scrolling="no" frameborder="no" name="Denver_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Denver&#39;+and+col1+%3D+&#39;ReconLinx+Highlands+Ranch&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

      <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+%3D+'ReconLinx+Highlands+Ranch'+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search" data-foo="header1"
        class="menu_head2"> 1</a> -

        <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+in+('A%26W+Auto+Body+Inc'%2C+'BodyWorks+by+MMI')+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search"
        data-foo="header2" class="menu_head2"> 2</a>
      </p>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题