HTML-如何定位-跳转到显示:无元素？

提问者：小点点

HTML-如何定位-跳转到显示:无元素？

设置的说明

我正在为我在Django的一个免打扰活动建立一个网站，并且使用了这个HTML5up.net页面的修改版本（CSS和JS是不变的）。在我的设置中，我有两个页面，一个索引页面(HTML5up的一个），人们可以登陆，“字符”页面，超链接到索引页面。

这里有一个演示索引页面（没有图像）的jsfiddle。

在开始时，索引页仅显示

，而超链接位于部分，该部分在开始时是不可见的。只有通过单击相应的按钮（例如characters）才能看到这些节。

我的目标:

我不仅希望能够跳转到

部分，而且希望能够打开

并跳转到其中的特定超链接（例如，指向“zart”字符页面的链接）。有了这个，我可以在字符页面上创建一个按钮，它可以在用户离开索引页面的位置返回到索引页面。

我的问题:

超链接回索引和锚点跳转到

节（例如“characters”）很容易实现:

; 返回字符

以打开文章部分并跳转到文章中的特定字符（例如“zart”）的方式超链接回索引，这种方式不起作用，尽管项目（例如“zart”）的锚点也具有正确的id（例如“zart”）:

；返回字符

事实上，我完全无法跳转到id为“zart”的锚，只要“character”的文章部分还没有显示。

如果它已经被显示（通过将jsfiddle中的“Add character”按钮的href更改为“#zart”进行测试），那么我可以跳转到该锚点，因此一般的跳转方式是有效的。它跳转到没有显示的锚（所以在CSS中“display:none”）是有问题的。我需要在跳转之前以某种方式获得该文章部分显示。

我怎么才能让它工作？

到目前为止，我所尝试的是这里所讨论的方法。没有一个为我工作。第一个答案导致所有文章部分的文本和超链接消失，第二个答案已经是我试图做的了。

资源

下面是该页面的HTML的缩短版本。

我把它简化为问题的基本部分，所以只剩下一个条目和字符部分。要获取CSS，请从HTML5up下载该页面，或者从文件库中以zip格式获取其CSS文件。遗憾的是，他们太长了，不能在这里张贴，我不知道哪些是必不可少的。

索引页的HTML:

<!DOCTYPE HTML>
<!--
    Dimension by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
    -->
<html>
<head>
    <title> Aldrune </title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="{% static 'frontpage/assets/css/main.css' %}"/>
    <link rel="stylesheet" href="{% static 'fontawesome47/css/font-awesome.min.css' %}">

    <noscript>
        <link rel="stylesheet" href="{% static 'frontpage/assets/css/noscript.css' %}"/>
    </noscript>
</head>
<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <div class="logo">
            <a class="icon"><span class="icon fa-gem"> </span></a>
        </div>
        <div class="content">
            <div class="inner">
                <h1>Aldrune</h1>
                <p><b> A campaign made by X and recorded by Y</b></p>
            </div>
        </div>
        <nav>
            <ul> <!-- The anchor-jump buttons to <article> -->
                <li><b><a href="#characters">Characters</a></b></li>
            </ul>
        </nav>
    </header>

    <!-- Main -->
    <div id="main">

        <!-- Characters article -->
        <article id="characters">
            <h2 class="major">Characters</h2>
            <ul> 
                <li><a id="Zart" href="LinkToCharactersPage1"> Zart </a></li>
                <li><a id="Zenevieva" href="LinkToCharactersPage2"> Zenevieva </a></li>
                <li><a id="Zuxus" href="LinkToCharactersPage3"> Zuxus </a></li>
            </ul>
        </article>
    </div>
</div>

<!-- Scripts -->
<script src="{% static 'frontpage/assets/js/jquery.min.js' %}"></script>
<script src="{% static 'frontpage/assets/js/browser.min.js' %}"></script>
<script src="{% static 'frontpage/assets/js/breakpoints.min.js' %}"></script>
<script src="{% static 'frontpage/assets/js/util.js' %}"></script>
<script src="{% static 'frontpage/assets/js/main.js' %}"></script>

</body>
</html>

共2个答案

匿名用户

这是可能的一点JS-Wizardry。基本原理是设置元素可见，以获得计算偏移量所需的值。这样做之后，元素将被设置为其原始状态。 -不用担心元素短时间不闪烁。内容将在js运行完毕后重新呈现。

此脚本需要在页面呈现后运行，因此将js放在底部或用Window.AddEventListener('load'，function（）{/*Code here...*/}）；包装它

null

// Pick every element having the class "js-jump"
document.querySelectorAll('.js-jump').forEach(function(element) {
  // Handle the "onclick" event for each given element
  element.onclick = function() {
    // read "data-target" of element
    const target = document.querySelector(element.dataset.target);
    
    // set the element you want to scroll
    // const scrollArea = document.window; // <- If you want to scroll the whole frame
    const scrollArea = document.querySelector('.scrollArea');
    
    // save the original "display" state of your element (to restore it, as soon we are done)
    const originalTargetDisplay = target.style.display;
    
    // "show" the target to get required values
    target.style.display = 'inline-block';
    
    // get the distance to top
    offset = target.offsetTop;
    offset -= Math.ceil(target.offsetHeight / 2);
    
    // restore original display-attribute
    target.style.display = originalTargetDisplay;

    // scroll :)
    scrollArea.scrollTop = offset;
  }
});

.scrollArea {
  border: 1px solid black;
  padding: 15px;
  height: 50px;
  overflow: scroll;
}

#a-tag {
  display: none;
}

<div class="scrollArea">
  Some<br />Content<br />Content<br />Content<br />Content<br />Content<br />
  <br />
  Hidden A-Tag -> <a id='a-tag'>I am hidden!</a> <- here!
  <hr />
  Some<br />More<br />Content<br />Content<br />Content<br />Content<br />
  Content<br />Content<br />Content<br />Content<br />
</div>
<hr / >
Controls:<br />
<a href='#a-tag'>Jump via LINK</a> (no working)<br/>
<a href='#' data-target='#a-tag' class='js-jump'>Jump via JS</a><br />

匿名用户

我认为链接到隐藏元素是不可能的，因为它不包含计算定位所必需的css属性。有多种方法可以在不使用display的情况下隐藏某些内容:none；

例如:溢出:隐藏；高度:0；

为了改变样式基于点击事件以显示内容，我相信只有JS才有可能。您可以使用css选择器和input:active status进行一些非常复杂的操作，但是我不建议使用DOM中已经分离的元素。

您是否试图避免使用JS来实现此功能或您所采用的方法？