Question

我想制作2个div的动画，但我没有成功:(。

我希望DIV Tablou向左移动，DIV Frame1，Frame2等......出现但每次我点击我的链接时，Tablou DIV向左移动。到目前为止，我成功地出现了框架，DIV Tablou向左移动。

问题是：如何让DIV Tablou向左移动并留在那里当我点击关闭按钮向右移动到原来的位置？非常感谢

HTML：

<div id="tablou"  onclick="move_left()">
  <div id="logo"></div>
    <div id="menu">
     <ul>
      <li><a href="javascript:show('frame1');" class="categories">Main</a></li>
      <li><a href="javascript:show('frame2');" class="categories">About Us</a></li>
     </ul>
    </div>

<div name="frames" id="frame1"> Frame 1 </div>

<div name="frames" id="frame2"> Frame 2 </div>

我正在使用的脚本：

function show(currentframe) {
     $('div[name|="frames"]').each(function(index) {
          if ($(this).attr("id") == currentframe) {
               $(this).show(200);      
          }
          else {
               $(this).hide(600);
          }
     });
}
function move_left() {
    $('#tablou').animate({
        'marginLeft' : "-=250px"
    });
}

Answer 1

在函数show中，你必须阻止事件冒泡，只要你附加那样的事件监听器就不能这样做。使用更现代的东西，因为我看到你正在使用jQuery尝试这样的事情：

HTML code：

<div id="menu">
  <ul>
    <li><a href="#" id="main" class="categories">Main</a></li>
    <li><a href="#" id="aboutus" class="categories">About Us</a></li>
  </ul>
</div>

使用Javascript：

$("#main").click(function(e) {
    // This prevents that the event bubbles up to #tablou
    e.stopPropagation();
    // This prevents that clicking on the link adds # to the url
    e.preventDefault();
    show("frame1");
});
$("#aboutus").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    show("frame2");
});

移动div不会停止onclick事件

1 个答案: