Скрытие div, когда отображается другое

Итак, у меня есть элемент nav с неупорядоченным списком, который я использую в качестве вкладок. Их три, вы нажмете один, и на нем появится div. Тем не менее, я хочу, чтобы, если вы нажмете на другой, он скроет отображаемый в данный момент, а затем покажет тот, который вы нажали. Но я не могу понять. Здесь функция у меня есть:Скрытие div, когда отображается другое

function display(action, id) 
{ 
if (action == 'show') 
{ 
document.getElementById("page"+id).style.display = "block"; 
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")"; 
} 

if (action == 'hide') 
{ 
document.getElementById("page"+id).style.display = "none"; 
document.getElementById("link"+id).href= "javascript:display('show', "+id+")"; 
} 
} 

</script>

Я пытался сделать что-то вроде

document.getElementById ("страницы" + ID + 1) .style.display = "нет";

Я думал, что это изменит стиль отображения ни на один из div с id больше, чем на текущий, но вместо этого он ничего не делает. Что бы я добавил к этому, чтобы он скрывал все открытые в настоящее время вкладки?

источник

2012-02-02 sbatson5

Могли бы вы вставить в HTML Aswell? – Niklas

Только для справок в будущем: если вы закончите использовать jQuery, вы можете попробовать использовать 'toggle()' (http://api.jquery.com/toggle/). – summea

также вы можете сохранить имя DIV в Hidden Input

http://jsfiddle.net/we2AJ/

<body> 
    <script language="javascript"> 
     function MyFunction(divName){ 

     //hidden val 
     var hiddenVal = document.getElementById("tempDivName"); 

     //hide old 
     if(hiddenVal.Value != undefined){ 
      var oldDiv = document.getElementById(hiddenVal.Value); 
      oldDiv.style.display = 'none'; 
     } 

     //show div 
      var tempDiv = document.getElementById(divName); 
      tempDiv.style.display = 'block';    

     //save div ID 
      hiddenVal.Value = document.getElementById(divName).getAttribute("id"); 

     } 
    </script> 
    <input id="tempDivName" type="hidden" /> 
    <ul> 
     <li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li> 
     <li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li> 
     <li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li> 
    </ul> 
    <br/> 
    <div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none"> 
     myDiv1 
    </div> 
    <div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none"> 
     myDiv2 
    </div> 
    <div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none"> 
     myDiv3 
    </div> 
</body>

источник

2012-02-02 22:27:13 feco

Я бы предпочел использовать глобальную переменную javascript var visible = 'myDiv1' - вне функции, а затем удалить скрытый тип ввода. Используйте эту глобальную переменную для хранения содержимого, которое отображается в момент щелчка ссылки/вкладки. – Rose

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

В поле togglecode добавьте класс для показанного элемента и удалите его для старого. Я сделал предположения о вашей структуре html, но это должно быть легко адаптируемо. classList не поддерживается < IE7, но вы можете использовать substitute in a regex, если необходима поддержка.

http://jsfiddle.net/8Q4vy/1/

<div class="nav show"><span>A</span></div> 
<div class="nav"><span>B</span></div> 
<div class="nav"><span>C</span></div> 
<script> 
    //get nav items 
    var navElems = document.getElementsByClassName('nav'); 

    //attach click handler to each 
    for (var i = 0; i < navElems.length; i++) { 
     navElems[i].onclick = toggleVisible; 
    } 

    //handle click events 
    function toggleVisible() { 
     //hide currently shown item 
     document.getElementsByClassName('show')[0].classList.remove('show'); 
     //show clicked item 
     this.classList.add('show'); 
    } 
</script>

источник

2012-02-02 22:17:54 mrtsherman

Скрытие div, когда отображается другое

ответ

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