Ausblenden und Anzeigen von Informationen basierend auf Abschnitt

Question

Mein Szenario ist wie folgt. Ich habe 7 Tabs (eines für jeden Tag) mit Bootstrap. Ich hätte gerne alle Informationen für 7 Tage im Wert von pageload geladen.

<ul class='nav nav-tbs'> 
    <li><a id='monday'>Monday</a></li> 
    <li><a id='tuesday'>Tuesday</a></li> 
    <li><a id='wednesday'>Wednesday</a></li> 
    <li><a id='thursday'>Thursday</a></li> 
    <li><a id='friday'>Friday</a></li> 
    <li><a id='saturday'>Saturday</a></li> 
    <li><a id='sunday'>Sunday</a></li> 
</ul> 

Ideal, wenn Sie auf einen Tag klicken, werden nur die Informationen angezeigt. Jede 'tägliche Seite' ist ziemlich komplex.

<div class='row'> 
    <div class='span12'> 
    <legend>Breakfast</legend> 
    </div> 
</div> 

<div class='row'> 
    <div class='span5 bfood'> 
    <h3>{{ bname }}</h3> 
    <img src='{{bimg }}'> 
    <ul> 
     {% for ing in bing %} 
     <li>{{ ing }}</li> 
     {% endfor %} 
    </ul> 
    </div> 
    <div class='span6'> 
    <div class='well'> 
     <form> 
     {{ csrf_token }} 
     <h2>Doesn't sound good?</h2> 
     <p> 
     <h3>Breakfast Food:</h3> 
     <input type='text' value='{{ bfood }}' id='bfood'> 
     </p> 
     <p> 
     <h3>Breakfast Required:</h3> 
     {% for breq in br %} 
     <div class='input-append'> 
      <input type='text' name='br' value='{{ breq }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endfor %} 
     <button class='btn btn-success add' id='br'><i class='icon-plus'></i></button> 
     </p> 
     <p> 
     <h3>Breakfast Forbidden:</h3> 
     {% for bfor in bf %} 
     {% if bfor != '' %} 
     <div class='input-append'> 
      <input type='text' name='bf' value='{{ bfor }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endif %} 
     {% endfor %} 
     <button class='btn btn-success add' id='bf'><i class='icon-plus'></i></button> 
     </p> 
     <button class='btn new-recipe' id='b'>Try again</button> 
     <div id='result'></div> 
     </form> 
    </div> 
    </div> 
</div> 
<div class='row'> 
    <div class='span12'> 
    <legend>Lunch</legend> 
    </div> 
</div> 
<div class='row'> 
    <div class='span5 lfood'> 
    <h3>{{ lname }}</h3> 
    <img src='{{ limg }}'> 
    <ul> 
     {% for ing in ling %} 
     <li>{{ ing }}</li> 
     {% endfor %} 
    </ul> 
    </div> 
    <div class='span6'> 
    <div class='well'> 
     <form> 
     {{ csrf_token }} 
     <h2>Doesn't sound good?</h2> 
     <p> 
     <h3>Lunch Food:</h3> 
     <input type='text' value='{{ lfood }}' id='lfood'> 
     </p> 
     <p> 
     <h3>Lunch Required:</h3> 
     {% for lreq in lr %} 
     <div class='input-append'> 
      <input type='text' name='lr' value='{{ lreq }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endfor %} 
     <button class='btn btn-success add' id='lr'><i class='icon-plus'></i></button> 
     </p> 
     <p> 
     <h3>Lunch Forbidden:</h3> 
     {% for lfor in lf %} 
     {% if lfor != '' %} 
     <div class='input-append'> 
      <input type='text' name='lf' value='{{ lfor }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endif %} 
     {% endfor %} 
     <button class='btn btn-success add' id='lf'><i class='icon-plus'></i></button> 
     </p> 
     <button class='btn new-recipe' id='l'>Try again</button> 
     </form> 
    </div> 
    </div> 
</div> 
<div class='row'> 
    <div class='span12'> 
    <legend>Dinner</legend> 
    </div> 
</div> 
<div class='row'> 
    <div class='span5 dfood'> 
    <h3>{{ dname }}</h3> 
    <img src='{{ dimg }}'> 
    <ul> 
     {% for ing in ding %} 
     <li>{{ ing }}</li> 
     {% endfor %} 
    </ul> 
    </div> 
    <div class='span6'> 
    <div class='well'> 
     <form> 
     {{ csrf_token }} 
     <h2>Doesn't sound good?</h2> 
     <p> 
     <h3>Dinner Food:</h3> 
     <input type='text' value='{{ dfood }}' id='dfood'> 
     </p> 
     <p> 
     <h3>Dinner Required:</h3> 
     {% for dreq in dr %} 
     <div class='input-append'> 
      <input type='text' name='dr' value='{{ dreq }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endfor %} 
     <button class='btn btn-success add' id='dr'><i class='icon-plus'></i></button> 
     </p> 
     <p> 
     <h3>Dinner Forbidden:</h3> 
     {% for dfor in df %} 
     {% if dfor != '' %} 
     <div class='input-append'> 
      <input type='text' name='df' value='{{ dfor }}'> 
      <button class='btn btn-danger rmv'><i class='icon-minus'></i></button> 
     </div> 
     {% endif %} 
     {% endfor %} 
     <button class='btn btn-success add' id='df'><i class='icon-plus'></i></button> 
     </p> 
     <button class='btn new-recipe' id='d'>Try again</button> 
     <div id='result'></div> 
     </form> 
    </div> 
    </div> 
</div> 

Was wäre die beste Strategie, jede der oben aus-/eingeblendet? Als Randnotiz möchte ich auch die Komplexität der "Single" -Seite reduzieren, da sie ziemlich lang ist und viel Wiederholungsmaterial enthält.

Answer 1

Wrap jedes Bündel von Tag Code in einem Element, wie ...

<div id="section_monday"> 
    //all code for monday 
</div> 

dann JQuery so ... Sie

$(".nav nav-tbs").find("a").click(function(e){ 
    e.preventDefault(); 

    var id = "section_" + $(this).attr("id"); 

    $("#" + id).toggle();//will turn sections on/off with each click 
}); 

Answer 2

Mit jQuery ist es einfach, nur show, hide oder toggle jedes Element auf Ihrer Seite.

Answer 3

Ich würde Sie vorschlagen, Folgendes zu tun:

1. Make-Funktionen für jeden Inhalt zu wiederholen, so dass Sie einen „sauberen“ Code haben
2. würde auch entlasten, wenn Sie etwas ändern müssen in einen der Segmente
3. stellen den Inhalt eines jeden Tages in einem separaten div und bei Belastung zeigen nur die div des aktuellen Tages oder etwas, das
4. Dann Ihren Bedürfnissen passt, wenn sie auf die div der Toggle-show hide Klick benötigt

Answer 4

Ich schlage vor, wie verwenden verwenden .toggleClass(function(index, class, switch) [, switch])

function gibt Klassennamen zurück, die im Klassenattribut jedes Elements in der übereinstimmenden Gruppe umgeschaltet werden sollen.

switch Ein boolescher Wert zur Bestimmung, ob die Klasse hinzugefügt oder entfernt werden soll.

Hier die vollständige Dokumentation http://api.jquery.com/toggleClass/