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

目前,我无法将php脚本打印的XXX表放入水平滑块。问题是,如果我要转到滑块的“第5页”,请单击链接,让浏览器在主页上而不是水平滑块上搜索“第5页”

因此,我如何拆分,保持分隔,主页的锚点和滑块的锚点?

谢谢。

编辑

我正在尝试使用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”之类的链接(因此不使用正斜杠),我将不会再遇到任何错误,但是什么也不会发生。创建分区/幻灯片的地方错了吗?我怎样才能得到一个像这样的链接,用正斜杠将部分链接和页面链接分开?

谢谢

最佳答案

这里有3个独立的问题。

主要主播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>


当您单击锚点时,文档将移至相应的“ 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/

次要锚点href:

所以部分将具有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函数。

但我想你明白了。

检查小提琴,在Firefox和chrome上通过Linux测试

https://jsfiddle.net/rymng1Lh/

希望对您有所帮助

10-07 19:28
查看更多