div 표시 jQuery 또는 JavaScript

Question

div에 해당하는 메뉴에서 버튼을 클릭하면 전환하려는 3 개의 div가 있습니다. 그들은 모두 내부에 다른 내용을 가지고 있습니다. (false)를

<div id="#">     
    <table width="700" style="color:#000">      
     <tr> 
      <td align="left" style="border: none"><label for="name">Name</label></td> 
      <td align="right" style="border: none"><input type="text" name="country" value="Value" readonly /></td> 
     </tr> 
     <tr height="10"></tr> 
     <tr> 
      <td align="left" style="border: none"><label for="name">Description</label></td> 
      <td align="right" style="border: none"><input type="text" name="country" value="#" readonly /></td> 
     </tr> 
     <tr height="20"></tr> 
     <tr> 
      <th align="left">Country</th><th></th> 
     </tr> 
     <tr> 
      <th align="left" id="th2">Value</th><th align="left" id="th2">Description</th> 
     </tr> 
     <tr> 
      <td>CH</td> 
      <td>Switzerland</td> 
     </tr> 
     <tr style="background-color:#f1f1f1;"> 
      <td>ZA</td> 
      <td>South Africa</td> 
     </tr> 
     <tr height="20"></tr> 
     <tr><td style="border: none"></td><td align="right" style="border: none"><input type="submit" value="Submit"></input></td></tr> 
    </table>  

</div><!-- country --> 

<div id="#" style="display: none">     
    <table width="700" style="color:#000"> 
     <tr> 
      <td align="left" style="border: none;"><label for="name">Value</label></td> 
      <td align="right" style="border: none;"><input type="text" name="hibernate" value="# " readonly /></td> 
     </tr> 
     <tr height="10"></tr> 
     <tr> 
      <td align="left" style="border: none;"><label for="name">Description</label></td> 
      <td align="right" style="border: none;"><input type="text" name="hibernate" value="#" readonly /></td> 
     </tr> 
     <tr height="25"></tr> 
     <tr> 
<table width="700" id="paramContent"> 
     <thead> 
      <tr> 
       <th>Value</th><th>Description</th><th>Property</th> 
            </tr> 
           </thead> 
           <tr> 
            <td></td><td></td><td></td> 
           </tr> 
           <tr> 
            <td></td><td></td><td></td> 
           </tr> 
           <tr> 
            <td></td><td></td><td></td> 
           </tr> 
           <tr height="20"></tr> 
          <tr><td style="border: none;"></td><td style="border: none"></td><td align="right" style="border: none"><input type="submit" value="Add"></input></td></tr> 


         </table> 
        </table> 
     </div><!-- div --> 

     <div id="#" style="display: none"> 

       <table width="700" style="color:#000"> 
        <div class="fields"> 
         <tr> 
          <td align="left" style="border: none;"><label for="name">Name</label></td> 
          <td align="right" style="border: none;"><input type="text" name="country" value="#" readonly /></td> 
         </tr> 
         <tr height="10"></tr> 
         <tr> 
          <td align="left" style="border: none;"><label for="name">Description</label></td> 
          <td align="right" style="border: none;"><input type="text" name="country" value="Language" readonly /></td> 
         </tr> 
         </div> 
         <tr height="20"></tr> 

          <tr> 
           <th align="left">Country</th><th></th> 
          </tr> 
          <tr> 
           <th align="left" id="th2">Value</th><th align="left" id="th2">Description</th> 
          </tr> 
          <tr> 
           <td>AF</td> 
           <td>Afrikaans</td> 
          </tr> 
          <tr> 
           <td>DE</td> 
           <td>German</td> 
          </tr> 
          <tr> 
           <td>EN</td> 
           <td>English</td> 
          </tr> 
          <tr> 
           <td>ZU</td> 
           <td>ZUlu</td> 
          </tr> 
          <tr height="20"></tr> 
          <tr><td style="border: none;"></td><td align="right" style="border: none;"><input type="submit" value="Submit"></input></td></tr> 


       </table> 

     </div><!-- language --> 

자바 스크립트

function toggleDiv(option) { 

     if (option == 'Country') { 
      document.getElementById('country').style.display = 'block'; 
      document.getElementById('hibernate').style.display = 'none'; 
      document.getElementById('language').style.display = 'none'; 
     } 


     if (option == 'Hibernate') { 
      document.getElementById('country').style.display = 'none'; 
      document.getElementById('hibernate').style.display = 'block'; 
      document.getElementById('language').style.display = 'none'; 
     } 

     if (option == 'Language') { 
      document.getElementById('country').style.display = 'none'; 
      document.getElementById('hibernate').style.display = 'none'; 
      document.getElementById('language').style.display = 'block'; 
     } 
    } 

그리고 버튼은 div의에게

<nav id="navTop">   
    <ul id="tabs">   
     <a href="" id="country" onclick="return false, toggleDiv('Country');"><li>Country</li></a> 
     <a href="" id="hibernate" onclick="return false, toggleDiv('Hibernate');"><li>Hibernate</li></a> 
     <a href="" id="language" onclick="return false, toggleDiv('Language');"><li>Language</li></a>   
    </ul>   
</nav> 

Answer 1

제거 쉼표를 교환하는 데 사용 : 다음은 HTML입니다

<a href="" id="country" onclick="return toggleDiv('Country');"><li>Country</li></a> 
<a href="" id="hibernate" onclick="return toggleDiv('Hibernate');"><li>Hibernate</li></a> 
<a href="" id="language" onclick="return toggleDiv('Language');"><li>Language</li></a> 

Answer 2

기본 이벤트를 방지하려는 것 같습니다. 그러나 false를 반환하는 것은 올바른 방법이 아닙니다.

<a onclick='event.preventDefault();toggleDiv('id');'>