html - 锚定页面？-6ren

html - 锚定页面？

转载作者：行者123 更新时间：2023-11-28 06:38:31

首先请允许我做个序言，我对html、CSS等知之甚少。我能做的大部分是遵循其他示例。我正在做一个标题菜单，每个链接都是页面内的一个 anchor 。 (div 在被点击之前是隐藏的)但是我陷入了这个问题。我在页面内有如下链接:

<div class="header">
    <a href="#B1">Block 1</a>
    <a href="#B2">Block 2</a>
</div>

这会给我 url "localhost/test1.html#B1"。但是，其中一个 div block 包含以下内容:

<div id="B1">
    <a href="#slide-one">
    <a href="#slide-two">
</div>

所以我已经知道我不能做 "localhost/test1.html#B1#slide-one"。

我什至不知道是否可以将此 anchor 链接指向已作为 anchor 打开的页面。没有使用任何 jquery、flash、java 等的选项。我只能使用 HTML/CSS。我假设这是不可能的，但我想最后一次尝试尝试并在这里询问。

编辑:更新的示例代码提供了更好的解释:

 <style type="text/css">
div#Menu {
  height:90px;
  left:0;
  position:fixed;
  top:-5px;
  width:100%;
  text-align:center;
}

div#B1 {
  position:absolute;
  left:-1000px;
  margin-top:0;
}
div#B1:target {
  top:100px;
  left:375px;
}

div#B2 {
  position:absolute;
  left:-1000px;
  margin-top:0;
}
div#B2:target {
  top:100px;
  left:375px;
}
</style>
</head>

<body>
<!--Header Menu-->
<div id="Menu" class="header">
    <a href="#B1">Block 1</a>
    <a href="#B2">Block 2</a>
</div>



<div id="B1" class="blocks">
    <div id="Slider1" class="Slide">
        <ul>
            <li id="slide-one"><img src="slide-one.png"/></li>
            <li id="slide-two"><img src="slide-two.png"/></li>
        </ul>
        <a href="#slide-one">Slide 1</a>
        <a href="#slide-two">Slide 2</a>
    </div>
</div>

<div id="B2">
    <div id="Slider1" class="Slide">
        <ul>
            <li id="slide-three"><img src="slide-three.png"/></li>
            <li id="slide-four"><img src="slide-four.png"/></li>
        </ul>
        <a href="#slide-three">Slide 3</a>
        <a href="#slide-four">Slide 4</a>
    </div>
</div>

我拥有的是带有缩略图导航的 CSS 图像 slider ，它们是每个部分中的 anchor 。在菜单上，我转到 block #1，它打开时包含一个图像 slider 库。我的页面 url 更改为“test1.html#B1” 图像 slider 具有每个图像的 anchor 。

在单独的普通页面上，单独的 slider 会为每个图像提供类似于“test1.html#slide-one”的页面 url。

但这是嵌套的，图像 slider 是“B1” block 的子 slider 。我需要打开 #B1 block ，然后在页面上打开之后我就有了图像 slider 库。每个图像都有自己的 anchor ，但我需要保留“B1”。

最佳答案

从你的问题表达方式我们可以想到两种不同的需求:

既然你说你想做 localhost/test1.html#B1#slide-one这可能意味着您考虑 #slide-one不仅存在于 #B1 的“上下文”中还有其他地方(例如在 #B2 中):但如果发生这种情况，则意味着 #B1和 #B2不在同一个 HTML 页面中!所以它不可能是你想要的。
相反，其余的全部文字表明您要访问的所有部分都在同一页面中。所以我将在下面解释这种情况。

在同一个HTML页面中，不能有多个id具有相同值的 s:一个 id独一无二，设计使然。
结果是:针对给定的 id你不需要几个中间点，即使用户真的像你的例子一样使用了这些中间点。

总而言之，您在问题中显示的代码就足够了!

最后一点:如果 id始终是唯一的，相反，您可以在定位它的地方无限次出现。换句话说，可以从多个 <a> 指向同一个(唯一的)目的地。 .

关于html - 锚定页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34484930/