Question

在显示或隐藏项目时将页面移动到顶部时出现问题。我想同时显示和隐藏容器，强制网站在触发显示/隐藏操作时不要将其滚动到顶部。

＆＃13;

<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->

＆＃13;

p{
  padding: 400px 0px;
}

＆＃13;

<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>
    <p>Lorem ipsum</p>
    <a href="#" onclick="toggle_visibility('movie1');">Movie 1</a>
    <div id="movie1" hidden>
        <video id="ad" width="1920" height="1080" controls>
            <source src="video/movie1.avi" type="video/avi">
            too old browser.
        </video>
    </div>
  
    <br/>
  
    <a href="#" onclick="toggle_visibility('movie2');">Movie 2</a>
    <div id="movie2" hidden>
        <video id="ad" width="1920" height="1080" controls>
            <source src="video/movie2.avi" type="video/avi">
            too old browser.
        </video>
    </div>
</body>
</html>

＆＃13;

如何防止此举？有没有其他解决方案或我需要更改切换脚本？

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/ftqo2z68/

从锚标记中删除href=#。

<强> JS： -

function toggle_visibility(id) {
    $("#"+id).toggle();
}

<强> HTML： -

<p>Lorem ipsum</p> <a onclick="toggle_visibility('movie1');">Movie 1</a>

<div id="movie1" hidden>
    <video id="ad" width="1920" height="1080" controls>
        <source src="video/movie1.avi" type="video/avi">too old browser.</video>
</div>
<br/> <a onclick="toggle_visibility('movie2');">Movie 2</a>

<div id="movie2" hidden>
    <video id="ad" width="1920" height="1080" controls>
        <source src="video/movie2.avi" type="video/avi">too old browser.</video>
</div>

显示/隐藏物品时保持站点位置

1 个答案:

试试这个： - http://jsfiddle.net/adiioo7/ftqo2z68/