Div Sichtbarkeit mit Javascript - Problem

Ich versuche Divs zu verwenden, um Inhalt auf meiner Seite anzuzeigen. Dies wird mit einem Onchange-Element in einem Auswahlmenü gesteuert. Es funktioniert perfekt, aber das Problem ist, ich möchte ein Div schließen, wenn ein anderes geöffnet wird. Das Div ist gut in Ordnung, aber es schließt die anderen nicht. Ein Beispielcode ist unten. Was mache ich falsch?Div Sichtbarkeit mit Javascript - Problem

JavaScript:

if(document.getElementById('catgry').value == '01'){ 
    document.getElementById('post04').style.visibility = "visible"; 
    document.getElementById('post04').style.display = ""; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}else if(document.getElementById('catgry').value == '02'){ 
    document.getElementById('post02').style.visibility = "visible"; 
    document.getElementById('post02').style.display = ""; 

    document.getElementById('post04').style.visibility = "hidden"; 
    document.getElementById('post04').style.display = "none"; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}

HTML:

<div id="post04" style="visibility:hidden; display:none;"> 
    <table class="posttb"><tr> 
    <td width="30%">Author</td> 
    <td><input type="text" name="author" size="30" class="postfd"></td> 
    </tr> 
</table> 

</div>

Quelle

2011-01-09 sammville

Sie könnten das Problem vereinfachen, indem die Anzeigeregeln in CSS setzen und nur das Hinzufügen und Klassen zu Ihrem divs zu entfernen. – keithjgrant

@sammville Live-Demo: http://jsfiddle.net/9Tx7g/ –

Nein, Sie müssen * jQuery * nicht verwenden. Aber Ihr aktueller Ansatz ist ziemlich ineffizient. Es wäre einfacher, den besten Ansatz zu kennen, wenn wir ein vollständigeres Bild Ihres HTML hätten. Sind die 'post0x' Elemente Geschwister? Wenn ja, hat der Elterncontainer eine ID? – user113716

Schwer zu sagen, ohne Ihren Markup zu sehen, aber es könnte sein, wie dies einfach wie:

Beispiel:http://jsfiddle.net/jtfke/

var posts = document.getElementById('posts').children; 

document.getElementById('catgry').onchange = function() { 
    for(var i = 0, len = posts.length; i < len; i++) { 
     posts[ i ].style.display = (i == this.selectedIndex) ? 'block' : ''; 
    } 
};

Beispiel html

<select id='catgry'> 
    <option value='post01'>post 1</option> 
    <option value='post02'>post 2</option> 
    <option value='post03'>post 3</option> 
    <option value='post04'>post 4</option> 
</select> 
<div id='posts'> 
    <div>post 1 content</div> 
    <div>post 2 content</div> 
    <div>post 3 content</div> 
    <div>post 4 content</div> 
</div>

Quelle

2011-01-09 01:46:41 user113716

Pure JS ist definitiv besser für die Fehlersuche Code. jQuery fügt das Problem nur hinzu, indem mehr als 50 KB nicht benötigter Code hinzugefügt werden. –

Betrachten Sie mit jQuery und jQuery Akkordeon http://jqueryui.com/demos/accordion/

Quelle

2011-01-09 01:12:47 Vadim

Gibt es keine Möglichkeit, es zu lösen, ohne jquery zu verwenden – sammville

@sammville Nun, welche JavaScript-Bibliothek verwenden Sie dann? –

Ich verwende keine Bibliothek dafür. Der Javascript-Code, den ich dafür geschrieben habe, ist über – sammville

Installieren jquery;

Verwenden Sie diesen Code als HTML-Markup für die Auswahlbox. denken Sie daran, geben Sie id = visibiitySelector und providean Attribut „_showelement“ für jeden Optionswert, die mit der ID des div entspricht, die Sie anzeigen möchten, wenn die Option

<select id="visibilitySelector"> 
    <option value="whatever" _showelement="post01">whatever</option> 
    <option value="whatever" _showelement="post02">whatever</option> 
</select>

Kopieren Sie diese Funktion in die Javascripts der Seite ausgewählt ist

$(document).ready(function(){ 
    $('#visibilitySelector').change(function(){ 
     var showelement = $('#visibilitySelector option:selected').attr('_showelement'); 
     $('div.showhide').not('#' + showelement).hide(); 
     $('#' + showelement).show(); 
    }); 
});

-Code der divs wie unten, die Erinnerung zu schaffen Klasse "showhide"

<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div>

Quelle

2011-01-09 01:33:13 Maurizio

Simpler: http://jsfiddle.net/9Tx7g/ –

Sie es mit reinem Javascript und einige looping tun können.

<form method="post" action="#"> 
    <select id="selectMenu"> 
     <option id="option1" value="option 1">option 1</option> 
     <option id="option2" value="option 2">option 2</option> 
     <option id="option3" value="option 3">option 3</option> 
    </select> 
</form> 

<div id="div1" class="postDiv">Div 1</div> 
<div id="div2" class="postDiv">Div 2</div> 
<div id="div3" class="postDiv">Div 3</div> 

<script type="text/javascript"> 
init(); 


function init() 
{ 
    addListeners(); 
} 

function addListeners() 
{ 
    document.getElementById("selectMenu").onchange = selectChange; 
} 

function selectChange(evt) 
{ 
    for(var i=0;i<evt.currentTarget.length;i++) 
    { 
     if(i == evt.currentTarget.selectedIndex) 
     { 
      adjustDivs(i+1, evt.currentTarget.options); 
     } 
    } 
} 

function adjustDivs(optionId, options) 
{ 
    document.getElementById("div" + optionId).style.display = "block"; 
    for(var i=0;i<options.length;i++) 
    { 
     if(i != (optionId-1)) 
     { 
      document.getElementById("div" + (i+1)).style.display = "none"; 
     } 
    } 
} 
</script>

http://jsfiddle.net/hGxfS/

Quelle

2011-01-09 02:03:32

+1 für eine nicht-jQuery-Lösung ... – WarrenFaith

Div Sichtbarkeit mit Javascript - Problem

Antwort

Verwandte Themen