jquery - menu z hide/show div'ów na początku oraz po kliku? Opcje

[marcus755]

[HTML] pobierz, plaintext 
<ul>
<li><a id="test-menu-1" href="#">test1</a></li>
<li><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>
[HTML] pobierz, plaintext 

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...:-)

Ten post edytował marcus755 18.07.2014, 15:37:35

[trueblue]

[HTML] pobierz, plaintext 
$(".test li a").click(function (e) {
 $(this).parent().addClass('selected');
 $('.tester').hide();
 $('#'+$(this).attr("id").replace('-menu','')).show();
 e.preventDefault();
});
[HTML] pobierz, plaintext 

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.

Ten post edytował trueblue 18.07.2014, 15:44:25

[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".

[HTML] pobierz, plaintext 
$('li a').click(function (e) {
 $('li').removeClass('selected');
 $(this).parent().addClass('selected');
 $('.tester').hide();
 $('#'+$(this).attr("id").replace('-menu','')).show();
 e.preventDefault();
});
[HTML] pobierz, plaintext 

Drugi:

[HTML] pobierz, plaintext 
$('.tester').hide();
$('#'+$('li.selected a').attr('id').replace('-menu','')).show();
[HTML] pobierz, plaintext 

Ten post edytował trueblue 18.07.2014, 16:10:57

[marcus755]

Wielkie Dzięki - Mistrzu:-)