Як називати div за елементом li за межами div - jquery, html, refer

на початку я повинен визнати це мої знанняпро програмування досить базовий. Я не розумію все так, може, моє запитання може виглядати трохи хитким, але все-таки мої ідеї закінчуються, і мені потрібно запитати.

Я використовував підручник з елементами слайдів і додавав деякіковзання Розділяйся на мій веб-сайт, все добре, але в цьому навчальному посібнику автор використовував елемент кнопки всередині parent 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 викликає дію клацання, а не кнопку, але після натискання він не ковзає 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 на елемент 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");
});
});

Ваш елемент кнопки повинен залишитися насторінка В основному це буде запускати будь-який код, прикріплений до кнопки "click event" - коли ви натискаєте будь-яку з ваших елементів LI.Ви можете встановити це, щоб працювати лише на 1 елемент списку, змінюючи селектор:

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

Це прикріпить цю функцію до елементу li class = "about".

Це працює, якщо ви плануєте залишитикнопка на вашій сторінці. Ви можете просто приховати кнопку в CSS, але це трохи незрозуміло. Якщо ви вирішите видалити кнопку зовсім, просто знайдіть код Javascript, який використовує кнопка. Це виглядатиме так:

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

або щось подібне. Потім просто перемістіть цей код всередині кнопки "click event" у події кліків для елемента списку.

---