Реализовать div-группу скрыть/показать

Question

Я пытаюсь реализовать механизм, чтобы скрыть/показать div внутри группы, что означает, что я хочу иметь только один div для группы. Конечно, я могу реализовать это, используя директиву ng-show, но я хотел бы иметь нечто более общее.

Например:

<div div-group="mygroup"> 
    <div id="div1"> ... </div> 
    <div id="div2"> ... </div> 
    <div id="div3"> ... </div> 
</div> 

Если вызвать функцию как showDiv ("div1"), другой DIV будет скрыт (div2 и div3). Я думал о добавлении объекта в корневую область, содержащую все внутренние статусы div (отображаемые или скрытые).

Большое спасибо за вашу помощь! Thierry

Answer 1

Одним из способов может использовать нг-класс

.show{ 
display:block 
} 

.hide{ 
display:none; 
} 

<div div-group="mygroup"> 
    <div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div> 
    <div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div> 
    <div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div> 
</div> 

$scope.choose=function(id){ 
$scope.selecteddiv=id; 
} 

So вы можете передать правильный идентификатор как строку в функции

Answer 2

Если вы хотите сделать это в ванили JS, вы можете просто написать showDiv функцию как этот

function showDiv(id) { 
    //hide all divs 
    document.findElementById('div1').style.display = 'none'; 
    document.findElementById('div2').style.display = 'none'; 
    document.findElementById('div3').style.display = 'none'; 
    //show just the div you want 
    document.findElementById(id).style.display = 'block'; //or whatever it was before 
}