Ako odkazovať na prvok div by li mimo tohto divízie, html, odkazujem

na začiatku musím priznať svoje vedomostio programovaní je celkom základná. Nechápem všetko, takže moja otázka môže vyzerat trochu klamlivo, no napriek tomu sa moje nápady vyčerpali a musím sa pýtať.

Použil som výukový program Slide Elements a pridal som niekoľkoposuvné Div do môjho webu, všetko funguje dobre, ale v tomto tutorial autor použil prvok gombíka vo vnútri rodičov div a na kliknutie vnútorné div diapozitívy. Chcem použiť prvok li z mojej navigačnej sekcie, ktorá je mimo divov, ale neviem, ako zmeniť kód skriptu, aby sa zachovala animácia v tejto div. V zásade to vyzerá:

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>

Podarilo sa mi zmeniť kód skriptu, že prvok li spustí akciu kliknutia, nie tlačidlo, ale po kliknutí nie je posunuté div, ale nasníma ďalší prvok li.

KÓD 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>

Akékoľvek návrhy?

Veľká vďaka!

odpovede:

0 pre odpoveď č. 1

Vzhľadom na tento riadok kódu,

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

ďalší prvok li po tom, na ktorý bol kliknutý, jeanimovaný, pretože neskôr urobíte $ marginLefty.animate (). Ak chcete animovať div, mali by ste nastaviť marginLefty na prvok div. Takže nahraďte tento riadok:

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

Ak chcete zistiť, na kto bol klepnutý, môžete to urobiť

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

vnútri obsluhy kliknutí. Potom môžete zmeniť obsah databázy div, na ktorej bol klepnutý, a pomocou funkcie html (). Napríklad,

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

Viac informácií o .attr () a .html () nájdete tu: http://api.jquery.com/attr/ a http://api.jquery.com/html/

---

0 pre odpoveď č. 2

Vyskúšaj tento:

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

---

0 pre odpoveď č. 3

Ak to chápu správne, chcete mať prvok LI, aby urobil to isté, čo robí prvok tlačidla? Môžete jednoducho spustiť kliknutie na tlačidlo:

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

Váš prvok tlačidla bude musieť zostať nastr. Tým sa v podstate spustí ľubovoľný kód pripojený k udalosti kliknutia tlačidla - kedykoľvek kliknete na ľubovoľný z vašich prvkov LI.Môžete nastaviť, aby pracoval iba na prvom prvku zoznamu zmenou voliča:

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

To pripojí túto funkciu iba k prvku li class = "about".

To funguje, ak plánujete opustiťna vašej stránke. Môžete jednoducho skryť tlačidlo v CSS, ale to je trochu neplodné Ak sa rozhodnete odstrániť tlačidlo úplne, jednoducho nájsť kód Javascript, že tlačidlo používa to bude vyzerať takto:

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

alebo niečo podobné. Potom jednoducho presuňte tento kód do udalosti kliknutia tlačidla do udalosti kliknutia pre prvok zoznamu.

---