/ / Jak odnieść się do div przez element li poza tym div - jquery, html, refer

Jak odnieść się do div przez element li poza tym div - jquery, html, refer

na początku muszę przyznać, że moja wiedzao programowaniu jest dość podstawowe. Nie rozumiem wszystkiego, więc może moje pytanie może wyglądać słabo, ale wciąż moje pomysły są wyczerpane i muszę o to zapytać.

Użyłem samouczka Slide Elements i dodałem trochęprzesuwając Div na mojej stronie, wszystko działa dobrze, ale w tym samouczku autor użył elementu przycisku wewnątrz div rodzica i kliknięcia wewnętrznych slajdów div. Chcę użyć elementu li z mojej sekcji nawigacji, która jest poza tym divs, ale nie wiem, jak zmienić kod skryptu, aby zachować animację w tym div. Zasadniczo wygląda to tak:

HTML:

    <ul id="navigation">
<li class="about"><a title="A" href="#" > </a></li>
<li class="search"><a title="P" href="#" ></a></li>
<li class="photos"><a title="G" href="#" ></a></li>
<li class="rssfeed"><a title="U" href="#" ></a></li>
<li class="contact"><a title="K" href="#" ></a></li>
</ul>

<div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>

Udaje mi się zmienić kod skryptu, który powoduje, że element li wyzwala akcję kliknięcia, a nie przycisk, ale po kliknięciu nie przesuwa elementu div, ale przesuwa następny element li.

KOD SCRIPT:

<script>

$(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

</script>

Wszelkie sugestie?

Wielkie dzięki!

Odpowiedzi:

0 dla odpowiedzi № 1

Z powodu tej linii kodu,

var $marginLefty = $(this).next();

następny element li po tym, co zostało kliknięteanimowane, ponieważ później robisz $ marginLefty.animate (). Jeśli chcesz animować element div, powinieneś ustawić marginLefty na element div. Więc zamień tę linię na:

var $marginLefty = $(".inner");

Aby dowiedzieć się, który li został kliknięty, możesz to zrobić

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class")

wewnątrz obsługi kliknięcia. Następnie możesz zmienić zawartość elementu div, na podstawie którego został kliknięty li, i używając funkcji html (). Na przykład,

var content;
if($liClass == "about"){
content = "about clicked";
}
else if($liClass == "search"){
content = "search clicked";
}
//more code here
//more code here
$marginLefty.html(content);

Więcej informacji na temat plików .attr () i .html () można znaleźć tutaj: http://api.jquery.com/attr/ i http://api.jquery.com/html/


0 dla odpowiedzi nr 2

Spróbuj tego:

   $(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $("a", this);
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

0 dla odpowiedzi № 3

Jeśli rozumiem to poprawnie, to czy chcesz, aby element LI robił to samo, co element przycisku? Możesz po prostu wywołać kliknięcie przycisku:

$(document).ready(function() {
$("#navigation li").click(function() {
$("#IDcontent").find("button").trigger("click");
});
});

Twój element przycisku musi pozostać nastrona. Zasadniczo uruchamia się dowolny kod dołączony do zdarzenia kliknięcia przycisku - za każdym razem, gdy klikniesz DOWOLNE elementy Twojego LI. Możesz ustawić to, aby działało tylko na jednym elemencie listy, zmieniając selektor:

  $("#navigation li.about").click(function() {
...
});

Ta funkcja będzie dołączana tylko do elementu li class = "about".

Działa to, jeśli planujesz odejść zprzycisk na twojej stronie. Możesz po prostu ukryć przycisk w CSS, ale to trochę niechlujstwa.Jeśli zdecydujesz się całkowicie usunąć ten przycisk, po prostu znajdź kod Javascript, którego używa przycisk. Będzie wyglądać tak:

$("#IDcontent button").click(function(){ ... });

lub coś podobnego. Następnie przenieś ten kod do zdarzenia kliknięcia przycisku w zdarzenie click dla elementu listy.