在显示/隐藏项目时保持站点位置

debugcn 发表于 Dev

强尼

显示或隐藏项目时，将页面移到顶部时遇到问题。我想同时显示和隐藏容器，从而迫使站点在触发显示/隐藏操作时不会将其向上滚动到顶部。

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

p{
  padding: 400px 0px;
}

<!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>

如何防止这一举动？还有其他解决方案还是我需要更改切换脚本？

阿迪亚·辛格（Aditya Singh）

试试看：-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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。