Question

开始时我必须承认我对编程的了解非常基础。我不明白所有事情，所以也许我的问题可能看起来有点蹩脚，但我的想法仍然用完了，我需要问一下。

我使用了幻灯片元素教程并在我的网站上添加了一些滑动Div，一切正常但在本教程中，作者在父div中使用了一个按钮元素，并单击了内部div幻灯片。我想使用我的导航部分中的一个li元素，但是我不知道如何更改脚本代码以保持该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>

任何sugestions？

非常感谢！

Answer 1

试试这个：

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

Answer 2

由于这行代码，

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

单击处理程序内的

。然后，您可以根据单击li的内容更改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/

Answer 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(){ ... });

或类似的东西。然后只需将按钮的click事件中的代码移动到list元素的click事件中。

如何通过div之外的li元素引用div

3 个答案: