我正在开发一个基于一页的网站。主页在菜单和部分/数据锚中具有垂直滚动。现在,我需要将水平滑块放在一个部分中。更具体地说,我有一个由一个或多个表的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/
希望对您有所帮助