0

我可以通过一个 js 函数来切换，该函数使用 href id 匹配到相应的 div 或 td 来切换。

但我的目标是能够使用页面底部的另一个 href 来切换 div/td。此 href 包含相同的 id 和名称。

这是一个示例：jsfiddle（切换功能在我的远程服务器中有效，但在 jsfiddle 中不起作用）

<script type="text/javascript">

function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("name");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}​
</script>

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes1-2" name="div1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes2-2" name="div2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3-2" href="javascript:showonlyonev2('newboxes3-2');" >toggle</a>
         </div>
         <div name="newboxes-2" id="newboxes3-2" name="div3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>


<div style="padding-top:20px;">
    <a id="myHeader1-2" name="div1" href="javascript:showonlyonev2('newboxes1-2');">See Div #1</a>  
</div>    

<div style="padding-top:20px;">
    <a id="myHeader2-2" name="div2" href="javascript:showonlyonev2('newboxes2-2');">See Div #2</a>  
</div>

<div style="padding-top:20px;">
    <a id="myHeader3-2" name="div3" href="javascript:showonlyonev2('newboxes3-2');">See Div #3</a>  
</div>    ​
4

1 回答 1

1

在 div 上具有“名称”属性是不寻常的。

顶部表格中的 div 每个都有 2 个“名称”属性。

我会清理它并再试一次。

于 2012-04-05T02:43:19.890 回答