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

Question

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

目前，我能够将 XXX 表通过 php 脚本打印到水平 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/

希望对你有帮助