javascript - HTML/JS - 创建一个 "double-level"的 anchor

Question

我正在开发一个基于单页的网站。主页通过菜单和部分/数据 anchor 进行垂直滚动。现在我需要在一个部分中放置一个水平 slider 。更具体地说，我有一个 div，它由一个包含一个或多个表的 php 脚本填充。如果一张表足以容纳所有信息，那没问题。但是，如果一个表格不够用，我需要在 div 中动态创建一个水平 slider ，其中每张幻灯片都是另一个 div，其中有一个表格。我已经完成了(我不确定我是否要发布代码，我需要很多行)。我的问题是将主页的 anchor 与水平 slider 的 anchor 分开。

目前，我能够通过 php 脚本将 XXX 表打印到水平 slider 中。问题是，如果我想转到 slider 的“第 5 页”，单击链接我会让浏览器在主页中搜索“第 5 页”而不是水平 slider

因此，我如何拆分、保持分离主页的 anchor 和 slider 的 anchor ？

谢谢。

编辑

我正在尝试使用 FullPage 水平 slider ，因为我的主页也是基于 FullPage.js 的。我从 php 脚本回显 slide div 和 table div 。结果结构如下:

<div class="section fp-section fp-table active" data-anchor="ineedslides" id="section1" style="height: 261px; padding: 3em 0px 10px;">
    <div class="fp-tableCell" style="height:199px;">

        <div class="wrapper style1">
                    <header class="major">
                        <h2>Hello</h2>
                        <p>I need a dynamic table below here!!</p>
                    </header>
            <div class="fp-slides" id="tables">

                <div class="fp-slidesContainer" style="width: 900%; top: 46%;"> 

                    <div class="slide" data-anchor="slide1" style="width: 11.111111111111%; float: left; top: 46%; position: relative;">
                        <ul></ul>
                        <div class="table-wrapper" style="top: 46%;">
                        </div>
                    </div>

                    <div class="slide" data-anchor="slide2" style="width: 11.111111111111%; float: left; top: 46%; position: relative;">
                        <ul></ul>
                        <div class="table-wrapper" style="top: 46%;">
                        </div>
                    </div>

                    <div class="slide" data-anchor="slide3" style="width: 11.111111111111%; float: left; top: 46%; position: relative;">
                        <ul></ul>
                        <div class="table-wrapper" style="top: 46%;">
                        </div>
                    </div>

                    <div class="slide" data-anchor="slide4" style="width: 11.111111111111%; float: left; top: 46%; position: relative;">
                        <ul></ul>
                        <div class="table-wrapper" style="top: 46%;">               
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>

好吧..现在单击其中一个链接导航到幻灯片，我得到“页面 mysite/#tables/slideX 不存在”。好吧.. 如果我尝试设置像“mysite#tables/slideX”这样的链接(所以没有正斜杠)，我不会再收到错误，但什么也没有发生。我在创建部分/幻灯片时哪里错了？我怎样才能得到这样的链接 http://alvarotrigo.com/fullPage/#secondPage/2使用正斜杠，将部分链接和页面链接分开？

谢谢

Answer 1

这里有 3 个独立的问题。

主要 anchor href:

假设你有这个

<a href="#section_one">Go to section one</a>
<a href="#section_two">Go to section two</a>

<div id="section_one">this is section one</div>
<div id="section_two">this is section two</div>

当您单击 anchor 时，文档将移动到相应的“id”。所以如果你在同一个页面，你不需要添加“host.com/#section_one”。

但你可以做到。检查此链接

https://docs.djangoproject.com/en/1.7/#the-view-layer

它会直接带你到那个 id : the-view-layer

如果你检查源代码，你会发现一个带有那个 id 的元素就在它登陆的顶部:

<span id="the-view-layer"></span>

如果你已经在那个页面上，一个简单的

<a href="#the-view-layer">The view Layer</a>

足以带你去那里。

正斜杠:

# 之前的正斜杠有效，因为有某种 url 重写。同样，如果你有

your_host.com/index.php 

你可以通过简单的书写到达相同的页面

your_host.com/

这适用于索引页

现在，如果该页面有一个 section_one，您可以使用 直接转到它

your_host.com/index.php#section_one

或

your_host.com/#section_one

您甚至可以将它放在外部页面的 anchor href 中

<a href="your_host.com/#section_one">Go to my host index page, on section one</a>

现在让我们在#之后添加一些内容

https://docs.djangoproject.com/en/1.7/#the-view-layer/fsdfdgd/fsdgdf

请注意，即使在 # 之后添加了这些额外的位，它也会转到同一页。服务器无法读取散列后的任何内容，因此它会加载正确的页面，但这一次，浏览器不会将您带到该部分，因为没有名为“the-view-layer/fsdfdgd/fsdgdf”的 id

所以正斜杠的问题很简单——要么你使用 index.php，要么你必须使用 url 重写，或者一个通过命名 url 为你做的框架

例如:

youhost.com/users/list/

辅助 anchor href:

所以部分将有像 section_one/slide_one 这样的 id

我做的非常快，如果你有某种 js slider 插件，你可能需要调整它，但你明白了:

<div id="header">
    <a class="main_links" href="#section_one/slide_one">1-1</a>
    <a class="main_links" href="#section_one/slide_two">1-2</a>
    <a class="main_links" href="#section_two/slide_one">2-1</a>
    <a class="main_links" href="#section_two/slide_two">2-2</a>
</div>

<section id="section_one">
    <div class="slide_holder">
        <div class="slide" id="section_one/slide_one"><p class="letters">1.1</p></div>
        <div class="slide" id="section_one/slide_two"><p class="letters">1.2</p></div>
    </div>
</section>

<section id="section_two">
    <div class="slide_holder">
        <div class="slide" id="section_two/slide_one"><p class="letters">2.1</p></div>
        <div class="slide" id="section_two/slide_two"><p class="letters">2.2</p></div>
    </div>
</section>

此示例仅使用 css，因此如果您需要停止 slider 插件或转到特定幻灯片，您可能必须更改此设置或什至创建一个在调用相应 anchor 时调用的 js 函数。

但我猜你明白了。

检查 fiddle ，在 Linux 上的 firefox 和 chrome 上测试

https://jsfiddle.net/rymng1Lh/

希望对你有帮助