/ / Как да се отнесем към елемента div by li извън тази div - jquery, html, отнесете

Как да се отнесем към елемента div by li извън тази div - jquery, html, отнесете

в началото трябва да призная, че знанията миза програмирането е съвсем основно. Не разбирам всичко, така че въпросът ми може да изглежда малко куцо, но все пак идеите ми свършват и трябва да попитам.

Използвах настойнически за Slide Elements и добавих някоиплъзгащи Div в моя сайт, всичко работи добре, но в този настойнически автор използва бутон елемент вътре в родителите div и на клик вътрешни div слайдове. Искам да използвам елемент "li" от моята навигационна част, която е извън това divs, но не знам как да променя кода на скрипта, за да запази анимацията в тази div. Всъщност изглежда:

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>

Успявам да променя кода на скрипта, така че елементът li да задейства действие на кликване, а не на бутона, но след кликване не го плъзга, но плъзга следващия елемент.

СКРИПЕН КОД:

<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>

Някакви предложения?

Много благодаря!

Отговори:

0 за отговор № 1

Поради този ред на кода,

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

следващият елемент "li" след това, върху което е кликнато, еанимирате, след като по-късно направите $ marginlefty.animate (). Ако искате да анимирате div, трябва да зададете marginLefty на element div. Затова заменете тази линия с:

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

За да разберете кой е бил кликнат, можете да го направите

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

вътре в инструмента за обработка на кликванията. След това можете да промените съдържанието на div, на което сте кликнали, и като използвате функцията html (). Например,

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

Повече информация за .attr () и .html () можете да намерите тук: http://api.jquery.com/attr/ и http://api.jquery.com/html/


0 за отговор № 2

Опитай това:

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

0 за отговор № 3

Ако разбирам това правилно, вие искате елемент LI, за да направите едно и също нещо, което прави бутонният елемент? Можете просто да задействате щракване върху бутона:

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

Вашият бутон елемент ще трябва да остане настраница. Това основно ще стартира всеки код, прикрепен към събитието за щракване на бутона - всеки път, когато кликнете върху който и да е от вашите LI елементи. Можете да настроите това, за да работите само върху 1 елемент от списъка, като промените селектора:

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

Това ще придаде тази функционалност само на елемента li class = "about".

Това работи, ако планирате да напуснетена страницата си. Можете просто да скриете бутона в CSS, но това е малко небрежно.Ако решите да премахнете бутона напълно, просто намерете Javascript код, който използвате бутона.Той ще изглежда така:

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

или нещо подобно. След това просто преместете този код в събитието за щракване на бутона в събитието за кликване за списъка.