0

一开始我不得不承认我对编程的了解是非常基础的。我不明白一切，所以也许我的问题看起来有点蹩脚，但我的想法仍然用完了，我需要问。

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

有什么建议吗？

非常感谢！

4

3 回答 3

0

试试这个：

   $(document).ready(function() {
      $('#navigation li').click(function() {
        var $marginLefty = $('a', this);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });
于 2013-02-16T19:07:14.257 回答
0

因为这行代码，

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

单击后的下一个 li 元素是动画的，因为您稍后会执行 $marginLefty.animate()。如果要为 div 设置动画，则应将 marginLefty 设置为 div 元素。因此，将该行替换为：

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

要找出点击了哪个 li，你可以这样做

// $(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/

于 2013-02-16T19:09:09.230 回答
0

如果我理解正确，您是否希望 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(){ ... });

或类似的东西。然后只需将该按钮的单击事件中的代码移动到列表元素的单击事件中。

于 2013-02-16T19:14:27.040 回答