z góry przepraszam jeżeli kod jest mało czytelny lub nie pisany wg standardów czy po prostu brzydki - nie pracuję w branży tylko muszę zrobić sobie wizytówkę.
Do rzeczy.
Mam stronę, która oparta jest na divach. Strona się nie przeładowuje, tylko skrypt ukrywa lub odkrywa konkretne divy.
Kod strony wygląda następująco:
<script type="text/javascript"> $().ready(function() { $("#menu li a").click(function() { $("#menu .active").removeClass("active"); $(this).parent().addClass("active"); var classname = $(this).attr("class"); $("#content div:visible").hide(); $("#content div#"+classname).show(); return false; }); }); </script> <div id="container"> <ul id="menu"> <li class="active"><a href="#" class="box1"><table id="tm"><tr><td>O NAS</td></tr></table></a></li> (...) <li><a href="#" class="box7"><table id="tm"><tr><td>ZAMÓWIENIE</td></tr></table></a></li> </ul> <div id="content"> <div id="box1"> </div> <div id="box2"><p> </div> (...) <div id="box7"> <div style="display:inline-block;"> <form action="wyslij.php" method="POST" onsubmit="return validateForm(this);" style="margin-left: 5%"> </form> </div> <div id="prawy" style="display:inline-block; width:30%; height:50%;"> <div style="display: none" id="id1"><img src=Obrazek ></div> <div style="display: none" id="id2"><img src=Obrazek ></div> <div style="display: none" id="id3"><img src=Obrazek ></div> </div> </div> </div>
Problem jest tego typu, że powyższy skrypt ukrywa wszystkie divy oprócz aktualnie klikniętego z menu, w tym także te divy, które znajdują się w divie box 7, czyli pokazuje się ten kontener a wszystkie które sa w nim już sa ukryte.
Jak zmodyfikować skrypt, żeby działał tylko do tych nadrzędnych div'ów o id=box1, box2 etc. ?
Domyślam się, że można użyć chamskich if'ów aby funkcja działała tylko dla boxów o danych id, ale jak zrobić to lepiej?