Show hide div jQuery或JavaScript

问题描述：

我有3个div，我想交换一个按钮，从对应div的菜单中单击。他们都有不同的内容。下面是HTML：Show hide div jQuery或JavaScript

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

中的JavaScript

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>

您面临的问题是什么？你无法触发JavaScript功能吗？ –

是的，我无法触发该功能。 – user3040525

删除返回false并使用onclick =“javascript：toggleDiv（'Language'）;” –

答

删除逗号（假）：

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

答

看来你想防止默认事件。但是，返回错误不是一个正确的方法。

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

Show hide div jQuery或JavaScript

相关推荐