javascript - 单击转到 url 和内容类名更改

Question

我在仅限移动设备的网站上工作，当我在索引页面中单击红色时，它显示转到 color.html 并使用其 id 更改其内容类名。当我单击它转到页面但不更改类名时。请给我一个解决方案

 Index.html:
 <script type="text/javascript">  
  function redActive(){
   document.getElementById("red").className = "red active";
  }
  function blueActive(){
   document.getElementById("blue").className = "blue active";
  }
  function greenActive(){
   document.getElementById("green").className = "green active";
  }
</script>

<div class="navi">
   <ul>
      <li><a href="color.html" onclick="redActive();">Red</a></li>
      <li><a href="color.html" onclick="blueActive();">Blue</a></li>
      <li><a href="color.html" onclick="greenActive();">Green</a></li>
   </ul>
</div>

color.html:
<div id="red" class="red"></div>
<div id="blue" class="blue"></div>
<div id="green" class="green"></div>

.red.active, .blue.active, .green.active {
   display:block;
}

Answer 1

因为 index.html 中的 JavaScript 不能改变 color.html 中的 className

试试这个:

索引.html

<div class="navi">
   <ul>
      <li><a href="color.html?c=red" onclick="redActive();">Red</a></li>
      <li><a href="color.html?c=blue" onclick="blueActive();">Blue</a></li>
      <li><a href="color.html?c=green" onclick="greenActive();">Green</a></li>
   </ul>
</div>

颜色.html:

<script type="text/javascript">  
  window.onload = function(){
    var query = window.location.search.substring(1);
    var cid= query.split("=")[1];
    document.getElementById(cid).className = cid + " active";
  }
</script>

<div id="red" class="red"></div>
<div id="blue" class="blue"></div>
<div id="green" class="green"></div>