Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery - menu z hide/show div'ów na początku oraz po kliku?
Forum PHP.pl > Forum > Po stronie przeglądarki
marcus755
  1. <ul>
  2. <li><a id="test-menu-1" href="#">test1</a></li>
  3. <li><a id="test-menu-2" href="#">test2</a></li>
  4. <li><a id="test-menu-3" href="#">test3</a></li>
  5. </ul>
  6.  
  7. <div class="test">
  8. <div class="tester" id="test-1">test-1</div>
  9. </div>
  10. <div class="test">
  11. <div class="tester" id="test-2">test-2</div>
  12. </div>
  13. <div class="test">
  14. <div class="tester" id="test-3">test-3</div>
  15. </div>


1. event który wykonuje się na początku:
jeżeli, np. w <li> z id="test-menu-2" znajdzie class="selected",
wtedy robi display:block; na <div id=test-2"> - reszta div'ów zmienia na display:none;
jeżeli w innymi <li> znajdzie class="selected", robi analogicznie jak powyżej...

2. event na kliku
jeżeli kliknę, w link i doda mi w <li>, w który kliknąłem class="selected",
wtedy jeżeli to będzie np. <li class="selected"><a id="test-menu-3" href="#">test3</a></li>,
wtedy robi display:block; na <div id=test-3"> - reszta div'ów zmienia na display:none;
jeżeli kliknę w inny <li> i doda class="selected", robi analogicznie jak powyżej...
Turson
Co już napisałeś?
marcus755
if ( $('.test li.selected a')) {
$(".tester").show();
} else {
$(".tester").hide();
}

$(".test li.selected a").click(function (e) {
var className = $(this).attr("id");
$(".tester").each(function () {
$(this).toggle($(this).hasClass(className));
});

e.preventDefault();
});

z tym, że mam problem z dynamicznym przydzielaniem po id z menu względem id z div'ów...

Ktoś wie jak to zrobić?
Na pewno coś takiego ktoś z Was kiedyś robił....
ew. może jakiś ktoś z Was zna szybki sposób,
nawet nie muszą być użyte te klasy i id,
ważne by działało...:-)
trueblue
  1. $(".test li a").click(function (e) {
  2. $(this).parent().addClass('selected');
  3. $('.tester').hide();
  4. $('#'+$(this).attr("id").replace('-menu','')).show();
  5. e.preventDefault();
  6. });

Trochę chyba nieprecyzyjnie opisałeś. Click powinno być na każdym "a", a nie takim gdzie "li.selected". Ale w tym przypadku każdy "li" klikanego "a" dostawałby klasę "selected". Doprecyzuj.
marcus755
już mówię o co chodzi...
wchodzę na site, mam na "dzień dobry" zaszyty za pomocą jquey w <li> klasę selected,

po pierwsze:
jak zrobić, żeby dynamicznie w zależności w którym <li> bedzie klasa selected,
przyporządkował mi selected,
w tym przypadku jest w <li>, gdzie <a href="#" ... ma id="test-menu-2"> (czyli druga pozycja w menu),
robi display: block dla <div class="tester" id="test-2">test-2</div>, a reszta div'ów jest ukryta (display:none;)

po drugie gdy kliknę w któryś link w menu, dajmy na to: link id="test-menu-3" znajdujący się w <li>,
wtedy dodaje mi selected do tego trzeciego <li> a ukrywa selected z tego poprzedniego,
jednocześnie ukrywa poprzedniego div'a z id="test-2", a pokazuje div'a z id="test-3"...

<ul>
<li><a id="test-menu-1" href="#">test1</a></li>
<li class="selected"><a id="test-menu-2" href="#">test2</a></li>
<li><a id="test-menu-3" href="#">test3</a></li>
</ul>

<div class="test">
<div class="tester" id="test-1">test-1</div>
</div>
<div class="test">
<div class="tester" id="test-2">test-2</div>
</div>
<div class="test">
<div class="tester" id="test-3">test-3</div>
</div>
trueblue
Pierwszy z małą modyfikacją, bo nie masz "li" poprzedzonych elementem z klasą "test".
  1. $('li a').click(function (e) {
  2. $('li').removeClass('selected');
  3. $(this).parent().addClass('selected');
  4. $('.tester').hide();
  5. $('#'+$(this).attr("id").replace('-menu','')).show();
  6. e.preventDefault();
  7. });


Drugi:
  1. $('.tester').hide();
  2. $('#'+$('li.selected a').attr('id').replace('-menu','')).show();
marcus755
Wielkie Dzięki - Mistrzu:-)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.