Question

我在Mobile网站上工作时，当我点击索引页面中的红色时，显示转到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

试试这个：

的index.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>

color.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>

Onclick goto url和内容Classname更改

1 个答案: