2015-06-29 1 views
3

Это кажется простым, но я не знаю, что делаю на самом деле. У меня есть 2 переключателя, и в зависимости от того, какой из них выбран, содержимое div изменится. Сейчас у меня есть 2 divs внутри родительского div, но он просто скроет один div и покажет другой. Это было бы неплохо, если бы они не занимали места, даже если они невидимы.Как изменить содержимое div с помощью javascript

HTML:

<div> 
    <form role="form"> 
     <div> 
      <div class="radio" id="radioSelection" onchange="chooseDiv()"> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1 
       </label> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2 
       </label> 
      </div> 
     </div> 
    </form> 
</div> 

<div id="parentDiv"> 
    <div id="div1">You're Awesome!</div> 
    <div id="div2">Everybody loves you!</div> 
</div> 

JavaScript:

function chooseDiv() { 
    if (document.getElementById("selectionDiv1").checked) { 
     document.getElementById("div2").style.visibility = "hidden"; 
     document.getElementById("div1").style.visibility = "visible"; 
    } else { 
     document.getElementById("div2").style.visibility = "visible"; 
     document.getElementById("div1").style.visibility = "hidden"; 
    } 
} 

Так что я хотел бы иметь это, только один DIV виден в то время, в зависимости от того, какая кнопка радио проверяется, и дон» если они не занимают место, когда они не находятся в div. Благодаря!

ответ

3

Если вы хотите, чтобы эти дивы прекратить принимать пространство, то есть не использовать дисплей: Нет вместо видимости: скрытый, изменить функцию

function chooseDiv() { 
    if (document.getElementById("selectionDiv1").checked) { 
     document.getElementById("div2").style.display = "none"; 
     document.getElementById("div1").style.display = "block"; 
    } else { 
     document.getElementById("div2").style.display = "block"; 
     document.getElementById("div1").style.display = "none"; 
    } 
} 

Работа plnkr: http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview

+0

Спасибо большое :) – Markus

+0

Добро пожаловать, рад, что это вам помогло. – yvesmancera

2

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

Лучшим подходом было бы использовать display.

Что-то вроде этого:

document.getElementById("div2").style.display= "none"; //similar to hidden 
document.getElementById("div1").style.display= "block"; // visible 
+0

Спасибо за внимание: D – Markus

1

Вы используете visibility: hidden скрыть дивы, которая скрывает их, но пусть они пространство в браузере, попробуйте вместо этого display свойства, вместо использования hidden использования none и вместо использования visible использовать block.

+0

Спасибо большое :) – Markus

1

Вы должны сначала понять разницу между объектами display и visibility.

дисплей - нет - когда вы делаете display none это означает, что весь элемент из DOM будет скрывать с его физическим существованием в DOM.So, не будет никакого распределения пространства для этого элемента в DOM.

Видимость - скрытая - В этом случае вы скрываете только этот элемент, но физически этот элемент присутствует в этом пространстве. Таким образом, пространство будет выделять этот элемент.

для получения более подробной информации, пожалуйста, следуйте this

+1

Удивительный! У меня не было определения, спасибо! – Markus

1

Используя только один DIV и содержание изменений

DEMO

HTML

<body onload='chooseDiv();'> 
<div> 
    <form role="form"> 
     <div> 
      <div class="radio" id="radioSelection" onchange="chooseDiv()"> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1 
       </label> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2 
       </label> 
      </div> 
     </div> 
    </form> 
</div> 

<div id="parentDiv"> 
    <div id="div1"></div> 
</div> 

<div style='display:none'> 
    <div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=hiFacebook'/></div> 
    <div id='c2'><span>TEST 2</span><img src='http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div> 
</div> 

</body> 

JS

function chooseDiv() { 
    var div = document.getElementById("div1"); 
    var msg = document.getElementById("c1").innerHTML; 

    if (!document.getElementById("selectionDiv1").checked) { 
     msg = document.getElementById("c2").innerHTML; 
    } 

    div.innerHTML = msg; 
} 
+0

Ваш ответ потрясающий, но в моем проекте у меня на самом деле есть графики в каждом div, я просто использовал текст, чтобы сделать пример более понятным – Markus

+0

В любом случае спасибо :) – Markus

+0

Отлично, вы можете установить html-содержимое внутри innerHTML. ex: innerHTML = '

' – Mate

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