Как скрыть div, когда присутствуют другие divs?

В последнее время я пытался посмотреть/изучить javascript и заинтересовался этой программой, так как знаю, что буду в состоянии использовать ее в будущем.Как скрыть div, когда присутствуют другие divs?

Я видел учебник на YouTube о том, как «скрыть/показать» а div поэтому я отлажен его и сделал его «показать/скрыть» div's и добавил еще два div's. Моя проблема в том, что я хотел скрыть другие открытые div's, когда я хочу показать конкретный, так как мой код теперь показывает все div's, независимо от существующих.

<html> 

<head> 

    <style type="text/css"> 
    #hide_add_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    #hide_edit_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    #hide_delete_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    </style> 

    <script type="text/javascript"> 
    function toggle_add_fname(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
     else 
     divelement.style.display = 'block'; 
    } 

    function toggle_edit_fname(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
     else 
     divelement.style.display = 'block'; 
    } 

    function toggle_delete_fname(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
     else 
     divelement.style.display = 'block'; 
    } 
    </script> 

</head> 

<body> 

    <table border='1'> 
    <tr> 
     <td colspan='3'> 
     <center>First Name</center> 
     </td> 
    </tr> 
    <td> 
     <button onclick="toggle_add_fname('hide_add_fname');">Add</button> 
    </td> 
    <td> 
     <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button> 
    </td> 
    <td> 
     <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button> 
    </td> 
    </tr> 
    </table> 

    <div id="hide_add_fname"> 
    <form method='POST'> 
     <center>Add First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Add'> 
     </center> 
    </form> 
    </div> 

    <div id="hide_edit_fname"> 
    <form method='POST'> 
     <center>Edit First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Edit'> 
     </center> 
    </form> 
    </div> 

    <div id="hide_delete_fname"> 
    <form method='POST'> 
     <center>Delete First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Delete'> 
     </center> 
    </form> 
    </div> 

</body> 

</html>

источник

2015-01-28 Carl Dun

Посмотрите на функцию JQuery UI Accordion –

попробовать этот код

<html> 

<head> 

    <style type="text/css"> 
    #hide_add_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    #hide_edit_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    #hide_delete_fname { 
     padding: 20px; 
     background: #f0f0f0; 
     width: 200px; 
     display: none; 
    } 
    </style> 

    <script type="text/javascript"> 
    function toggle_add_fname(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'block') 
     divelement.style.display = 'none'; 

     else{ 
     divelement.style.display = 'block'; 
     document.getElementById('hide_edit_fname').style.display='none'; 
     document.getElementById('hide_delete_fname').style.display='none'; 
     } 
    } 


    function toggle_edit_fname(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'block') 
     divelement.style.display = 'none';   
     else 
     { 

     divelement.style.display = 'block'; 
     document.getElementById('hide_add_fname').style.display='none'; 
     document.getElementById('hide_delete_fname').style.display='none'; 

     } 


    } 

    function toggle_delete_fname(id) { 

     var divelement = document.getElementById(id); 
     if (divelement.style.display == 'block')  
     divelement.style.display = 'none'; 
     else{ 
     divelement.style.display = 'block'; 
     document.getElementById('hide_add_fname').style.display='none'; 
     document.getElementById('hide_edit_fname').style.display='none'; 
     } 
    } 
    </script> 

</head> 

<body> 

    <table border='1'> 
    <tr> 
     <td colspan='3'> 
     <center>First Name</center> 
     </td> 
    </tr> 
    <td> 
     <button onclick="toggle_add_fname('hide_add_fname');">Add</button> 
    </td> 
    <td> 
     <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button> 
    </td> 
    <td> 
     <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button> 
    </td> 
    </tr> 
    </table> 

    <div id="hide_add_fname"> 
    <form method='POST'> 
     <center>Add First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Add'> 
     </center> 
    </form> 
    </div> 

    <div id="hide_edit_fname"> 
    <form method='POST'> 
     <center>Edit First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Edit'> 
     </center> 
    </form> 
    </div> 

    <div id="hide_delete_fname"> 
    <form method='POST'> 
     <center>Delete First Name:</center> 
     <br> 
     <center> 
     <input type='text'></input> 
     </center> 
     <br> 
     <center> 
     <input type='submit' value='Delete'> 
     </center> 
    </form> 
    </div> 

</body> 

</html>

источник

2015-01-28 04:21:07 Kishan

Отлично работает, спасибо! –

Я хотел бы использовать JQuery для этого. Поскольку для достижения чего-то подобного потребуется примерно несколько строк кода. Но в любом случае, вот что вы могли бы сделать.

Добавить класс, называемый divs, ко всем вашим div. И вставьте этот код в начале каждой из функций переключения.

var myElements = document.querySelectorAll(".divs"); 

for (var i = 0; i < myElements.length; i++) { 
    myElements[i].style.display = 'none'; 
}

Вы могли бы выше код в функции и запустить его в начале ваших функций тумблеров, и я рекомендую вам сделать это, чтобы сохранить ваш код понятнее.

В любом случае, то, что я здесь делаю, скрывает каждый div в начале, независимо от того, что было нажато. И тогда ваш код просто покажет div, который должен быть показан. Я не очень хорошо разбираюсь в javascript для манипуляций с DOM. Эксперты Javascript исправляют меня, если я ошибаюсь.

EDIT: Я пропустил тот факт, что вы также хотите переключить его. Вот обновленный код.

function hidedivs(){ 
    var myElements = document.querySelectorAll(".divs"); 

    for (var i = 0; i < myElements.length; i++) { 

     myElements[i].style.display = 'none'; 
    } 
    } 
    function toggle_add_fname(id) { 
    var divelement = document.getElementById(id); 
    if(divelement.style.display == 'none'){ 
     hidedivs(); 
    } 

    if(divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
    else 
     divelement.style.display = 'block'; 
    } 

    function toggle_edit_fname(id) { 
    var divelement = document.getElementById(id); 
    if(divelement.style.display == 'none'){ 
     hidedivs(); 
    } 

    if(divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
    else 
     divelement.style.display = 'block'; 
    } 

    function toggle_delete_fname(id) { 
    var divelement = document.getElementById(id); 
    if(divelement.style.display == 'none'){ 
     hidedivs(); 
    } 
    if(divelement.style.display == 'block') 
     divelement.style.display = 'none'; 
    else 
     divelement.style.display = 'block'; 
    }

источник

2015-01-28 04:27:08 Jason

Если вам нужно использовать один и тот же конкретный селектор более одного раза, классы - лучший выбор.

<div id="hide_add_fname" class='fname'>

гибкий способ применить стиль

var element_list = document.getElementsByClassName(class_name); 
    for (var i = 0; i < element_list.length; i++) { 
     element_list[i].style.display = 'none'; 
    }

JSFiddle пример

http://jsfiddle.net/83yrf4tx/

Более подробную информацию об идентификаторах и классов

In CSS what is the difference between "." and "#" when declaring a set of styles?

источник

2015-01-28 04:58:24 Parfait

Как скрыть div, когда присутствуют другие divs?

ответ

Смежные вопросы