Скрыть/показать элементы с javascript

Question

Я попытался найти ответ, но еще не нашел нужного. И я должен сделать это с помощью javascript, поэтому не давайте никаких ответов jQuery. Мои навыки в javascript также очень низкие, так как я только начал изучать его.

Это то, что я должен сделать: У меня есть три кнопки, каждая из которых имеет свой собственный контент, который находится внутри div (так что три разных divs, которые есть). Когда сайт загружается в первый раз, я буду видеть контент только с первой кнопки. Если я нажму другую кнопку, я увижу только содержимое этой новой кнопки, и все остальное должно исчезнуть (за исключением трех кнопок, конечно).

Я попытался поиграть с document.getElementById("button1").style.visibility = "hidden"; внутри функции и так далее, но я все еще не могу заставить ее работать, особенно когда я пытаюсь подключить функцию к html-документу.

Любые советы?

Answer 1

Надежда ниже помогает

<button onclick="javascript:show(1)">One</button> 
<button onclick="javascript:show(2)">Two</button> 
<button onclick="javascript:show(3)">Three</button> 

<div id="content1">content one</div> 
<div id="content2" style="display:none">content two</div> 
<div id="content3" style="display:none">content three</div> 

<script> 
function show(dv){ 
    hideAll(); 
    if(dv == '1'){ 
      document.getElementById("content1").style.display = "block"; 
    }else if(dv == '2'){ 
       document.getElementById("content2").style.display = "block"; 
    }else{ 
     document.getElementById("content3").style.display = "block"; 
    } 
} 

function hideAll(){ 
    document.getElementById("content1").style.display = "none"; 
    document.getElementById("content2").style.display = "none"; 
    document.getElementById("content3").style.display = "none"; 
} 

</script> 

Answer 2

Несколько замечаний:

• Вы должны следить за click события на то, что необходимо нажать
• При нажатии, вы можете определить, какой DIV должен быть показан. visibility: hidden или display: none
• Убедитесь, что Javascript выполняется после того, как загрузил HTML-элементы, в противном случае он не будет назначать обработчик кликов и т.д.

Answer 3

Вот один из способов сделать это с простым JavaScript, который использует общий код для каждая кнопка, не Javascript в вашем HTML и данных атрибуты:

HTML:

<div id="buttonContainer"> 
<button data-content="content1">Content 1</button> 
<button data-content="content2">Content 2</button> 
<button data-content="content3">Content 3</button> 
</div> 

<div id="contentContainer"> 
<div id="content1">Showing Content 1</div> 
<div id="content2">Showing Content 2</div> 
<div id="content3">Showing Content 3</div> 
</div> 

Javascript:

var buttons = document.querySelectorAll("#buttonContainer button"); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener("click", function() { 
     var contentItem = this.getAttribute("data-content"); 
     var contents = document.querySelectorAll("#contentContainer div"); 
     for (var j = 0; j < contents.length; j++) { 
      contents[j].style.display = "none"; 
     } 
     document.getElementById(contentItem).style.display = "block"; 
    }); 
} 

Работа демо: http://jsfiddle.net/jfriend00/rcDXX/

Объяснение:

1. Создайте DIV, который содержит кнопки.
2. Создайте div, содержащий различные области содержимого.
3. Создайте правила CSS, которые отображают/скрывают содержимое для соответствующего начального состояния.
4. Поместите атрибут данных на каждую кнопку, которая сообщит вам, какую область содержимого он должен показывать, чтобы вы могли использовать общий код для всех кнопок.
5. Получите все кнопки в списке узлов.
6. Установите обработчик события щелчка на каждой кнопке.
7. В этом обработчике запросов введите идентификатор содержимого, который должен отображаться для этой кнопки.
8. Скрыть все области содержимого, установив их стиль на style.display = "none"
9. Показать нужную область содержимого.

FYI, вот немного более продвинутый вариант кода, который использует вспомогательную функцию: http://jsfiddle.net/jfriend00/aqMLt/

Answer 4

просто сделал это на jsfiddle http://jsfiddle.net/6EGT2/. сначала создать функцию, чтобы показать и скрыть дивы

function hideDiv(divid) 
{ 
    document.getElementById(divid).style.visibility= 'hidden'; 
} 

function showDiv(divid) 
{ 
    hideDiv('div1'); 
    hideDiv('div2'); 
    hideDiv('div3'); 
    document.getElementById(divid).style.visibility = ''; 
} 

Теперь HTML:

<input type='button' value ='button1' onclick='showDiv("div1")'> 
<input type='button' value ='button2' onclick='showDiv("div2")'> 
<input type='button' value ='button3' onclick='showDiv("div3")'> 

<div id='div1'>content 1</div> 
<div id='div2'>content 2</div> 
<div id='div3'>content 3</div> 

Answer 5

Похоже, вы переключая видимость кнопки а не содержание. Каков ID вашего контента div?

при условии:

<div id="containerDiv"> 
    <div id="div1">blahblah</div> 
    <div id="div2">blahblah</div> 
    <div id="div3">blahblah</div> 
</div> 

Затем просто установить кнопки для перехода к функции как "toggleVisibility". Я тестировал это, и он будет работать от IE 5.5 и более поздних версий, Firefox, Chrome 1.0 и Safari.

function toggleVisibility(id){ 

    var containerDiv = document.getElementById("containerDiv"); 
    var innerDivs = containerDiv.getElementsByTagName("DIV"); 

    for(var i=0; i<innerDivs.length; i++) 
    { 
     if (i == id){ 
      innerDivs[i].style.visibility = "visible"; 
      innerDivs[i].style.display = ""; 
     } 
     else{ 
      innerDivs[i].style.visibility = "hidden"; 
      innerDivs[i].style.display = "none";   
     } 
    } 
} 

toggleVisibility(0);