Question

我正在开发一个基于单页的网站。主页面具有垂直滚动菜单和部分/数据锚点。现在我需要在一个部分放一个水平滑块。更具体地说，我有div，它由带有一个或多个表的php脚本填充。如果一个表足以满足所有信息，则没有问题。但如果一个表不够，我需要在div中动态创建一个水平滑块，其中每个幻灯片是另一个div，里面有一个表。我已经完成了它（我不确定我想发布代码，我需要很多行）。我的问题是将主页面的锚点与水平滑块的锚点分开。

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

因此，我如何拆分，保持separeted，主页的锚点和滑块的锚点？

感谢。

修改

我试图使用FullPage水平滑块，因为我的主页也是基于FullPage.js。我从PHP脚本回复slide div and the 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个不同的问题。

主要支柱

想象一下，你有这个

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

单击锚点时，文档将移动到相应的“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

你甚至可以将它放在外部页面上的锚点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 /

辅助锚点

因此，部分的ID将类似于section_one / slide_one

我做得非常快，你可能不得不调整它，如果你有某种js滑块插件，但你明白了这一点：

<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，因此如果您需要停止滑块插件或转到特定幻灯片，您可能需要更改此设置，甚至创建在调用相应锚点时调用的js函数。 / p>

但是你猜对了。

检查小提琴，在linux上测试firefox和chrome

https://jsfiddle.net/rymng1Lh/

我希望它有所帮助

Answer 2

fullPage.js目前没有提供使用动态部分或幻灯片的正确方法。您需要复制它使用的结构。

在处理部分中的幻灯片时，

fullPage.js在内部遵循以下结构：

<div class="section fp-section" id="section1" data-anchor="secondPage" style="height: 925px; background-color: rgb(75, 191, 195);">
    <div class="fp-slides">
        <div class="fp-slidesContainer">
            <div class="slide fp-slide" style="width: 25%;">
              Slide 1
            </div>
            <div class="slide fp-slide" style="width: 25%;">
                Slide 2
            </div>
            <div class="slide fp-slide" style="width: 25%;">
                Slide 3
            </div>
        </div>
    </div>
    <div class="fp-controlArrow fp-prev"></div>
    <div class="fp-controlArrow fp-next"></div>
</div>

您可以通过检查the demo page中的DOM来轻松检查它。

请注意以下几点：

fullPage.js正在使用内部类来识别部分中的幻灯片，即：fp-slide。
它还为类fp-slidesContainer和fp-slides
您还必须以百分比的形式添加width，具体取决于您拥有的幻灯片数量。
每个箭头（左和右）有两个元素

HTML / JS - 创建一个＆＃34;双层＆＃34;锚

2 个答案: