2012-04-05 8 views
0

対応するdivまたはtdに一致させるためにhref idを使用するjs関数を切り替えることができます。divを複数回通して切り替えます。<a>タグ - Jquery/Javascript

私の目標は、div/tdをページの下部にある別のhrefと切り替えることができるようにすることです。この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> ​ 
+1

ヘッドオンボディではなく、オンロードに設定されていたので動作しませんでした。 [固定されたフィドル](http://jsfiddle.net/X8U82/16/) – epascarello

答えて

1

div要素の「name」属性を持つことは珍しいです。

トップテーブルのdivにはそれぞれ2つの「名前」属性があります。

私はそれをきれいにして再試行します。

関連する問題