Question

我已经通过你的答案进行了很多搜索，但我还没有找到解决问题的办法。

现在，我的情况是这样的：

我有一个div，id =＆＃34; modal＆＃34;，这是隐藏的，只显示用jquery添加css属性。
内部＆＃34;莫代尔＆＃34;有更多div水平定位，制作幻灯片，每个div都有一个id。
外部＆＃34;模态＆＃34;，我有一个菜单，其中每个链接指向滑块的某个div。
一切正常，每个div在被调用时显示，但我的问题是每次我点击一个链接和＆＃34;模态＆＃34;显示，页面跳到底部或向下滚动。
我尝试使用event.preventDefault（），但它阻止了滑块div的选择。

有什么方法可以解决我的问题吗？

Ps：除了Firefox之外，每个浏览器都有这个问题。

为了帮助理解这是jQuery：

function Show() {
    $('.modal').css('display', 'block');
    $('body').css('overflow', 'hidden');
};

function Hide() {
    $('.modal').css('display', 'none');
    $('body').css('overflow', 'auto');
};

function Next() {
    $('#main-wrap').animate({scrollLeft: '+=800'}, 1000);
};

function Previous() {
    $('#main-wrap').animate({scrollLeft: '-=800'}, 1000);
};

这是HTML：

<div id="main-modal">
<div id="modal" class="modal">
    <a id="close" href="javascript:void(0);" onClick="Hide()">Close</a>
    <a id="next" href="javascript:void(0);" onClick="Next()">Next</a>
    <a id="previous" href="javascript:void(0);" onClick="Previous()">Previous</a>

    <div id="main-wrap">
        <div id="wrapper">
            <div class="wrapper-div" id="Art1">
            </div>
            <div class="wrapper-div" id="Art2">
            </div>
            <div class="wrapper-div" id="Art3">
            </div>
            <div class="wrapper-div" id="Art4">
            </div>
            <div class="wrapper-div" id="Art5">
            </div>
        </div>
        </div>
</div>

<div id="overlay" class="modal">
</div>
</div>

   <div class="container">
    <ol>
        <li><a href="#Art1" onClick="Show()">Valerio Adami</a></li>
        <li><a href="#Art2" onClick="Show()">Rodolfo Aricò</a></li>
       <li><a href="#Art3" onClick="Show()">Mario Bionda</a></li>
       <li><a href="#Art4" onClick="Show()">Remo Brindisi</a></li>
       <li><a href="#Art5" onClick="Show()">Carmelo Cappello</a></li>
     </ol>
    </div>

Answer 1

不要内联脚本
不要在hrefs中使用javascript协议
从事件处理程序
使用类名而不是每种类型的点击功能

3号：

$(function() {
  $("#close").on("click",function(e) {
    e.preventDefault();
    Hide();
  });
});

使用

 <a id="close" href="#">Close</a>

比隐藏和显示更好：

$(function() {
  $("#toggle").on("click",function(e) {
    e.preventDefault();
    $('.modal').toggle();
  });
});

使用

 <a id="toggle" href="#">Toggle</a>

停止页面跳转但仍然转到href

1 个答案: