Показать скрыть div JQuery или JavaScript

Question

Показать скрыть div JQuery или JavaScript

0

У меня есть 3 divs, которые я хочу поменять, нажав кнопку, из меню, которое соответствует 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';
        }
    }

И кнопки, используемые для обмена divs

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

user3040525 29 нояб. 2013, в 08:15

Источник

0

с какой проблемой вы сталкиваетесь? Вы не можете вызвать функцию JavaScript?
Rudresha Parameshappa 29 нояб. 2013, в 06:23
0

Да, я не могу вызвать функцию.
user3040525 29 нояб. 2013, в 06:52
0

удалите return false и используйте onclick = "javascript: toggleDiv ('Language');"
Rudresha Parameshappa 29 нояб. 2013, в 07:08
0

Попробую это. Спасибо
user3040525 29 нояб. 2013, в 07:19
0

все еще возникают проблемы с тем, что функция не срабатывает, когда активирован onclick. Попробовал onclick = "javascript: toggleDiv ('Language');"
user3040525 29 нояб. 2013, в 07:42

Показать ещё 3 комментария

Теги:

javascript

jquery

html

show

hide

2 ответа

Ещё вопросы

с какой проблемой вы сталкиваетесь? Вы не можете вызвать функцию JavaScript?
удалите return false и используйте onclick = "javascript: toggleDiv ('Language');"
все еще возникают проблемы с тем, что функция не срабатывает, когда активирован onclick. Попробовал onclick = "javascript: toggleDiv ('Language');"

Tom Chung · Answer 1 · 2013-11-29T05-25-00.000Z

Кажется, что вы хотите предотвратить событие по умолчанию. Но return false не является правильным методом.

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

Ankit Tyagi · Answer 2 · 2013-11-29T03-42-00.000Z

Удалить запятую (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>