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

Holding site position while showing / hiding items

本文关键字：站点 位置 项目 显示 隐藏      更新时间：2023-09-26

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

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

如何防止这一举动?是否有其他解决方案或我需要改变切换脚本?

试试这个:- 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>
相关文章：