Question

我想要交换3个div，因为从菜单中单击了一个按钮，对应于div。它们内部都有不同的内容。这是html：

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

Answer 1

删除逗号（false，）：

 <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');'>

显示hide div jQuery或JavaScript

2 个答案: