DouPHP如何在一个页面调用多个单页的内容

需求：在导航栏中点击“关于我们”（单页）中的下一级导航跳转到一个页面的对应位置。也就是需要在同一个页面调用多个单页的内容。

首先想到的是通过锚链接，跳转到对应位置。但是如何才能够在同一个页面调用多个单页的内容呢？

经过一番琢磨，我想到，既然这4个单页（4个块状）都是一样的样式，这就有点像文章或产品的列表的了。把这个页面当成一个列表页，通过foreach来循环，是否就能够达到想要的效果了？动手试了一下，果然可以。

那如何做锚链接呢？锚链接需要通过<a>标签设置name的值来完成，这时候，name的值应该就是动态的，如果直接调用单页的别名不就可以了？那么如何调用单页别名呢？在数据库中，我看到别名的字段是unique_id，于是我就尝试用{$page.unique_id}标签看是否可以调用，果不其然，确实能够动态调用到单页别名。

代码如下：

<!-- {foreach from=$page_list name=page_list item=page} -->
<div>
<h4 class="title"><a name="{$page.unique_id}" style="colo6);">{$page.page_name}</a></h4>
<hr />
<div class="text">
{$page.content}
</div>
</div>
<!-- {/foreach} -->

那么剩下的就是怎么设置导航和跳转了。我用的是自定义导航的方式。

经过测试，直接在“链接地址”里面增加“#单页别名”的方式并不能跳转，点击时的连接为“网站地址/#单页别名”。经过观察，我发现如果是单页的连接后面加上“#单页别名”的方式是可以跳转的，于是，我在后台添加自定义导航的时候，在“连接地址”填入“page.php?id=1#单页别名”，经过测试，基本上能够实现客户的需求。

DouPHP如何在一个页面调用多个单页的内容相关推荐

layui登录页面写入数据_layuiAdmin单页版文档
该文档适用于 layuiAdmin 专业版(单页面),阅读之前请务必确认是否与你使用的版本对应. 熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, layui 的文档 ...
java 单页面spa_Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端>http://download.csdn.net/detail/epubitbook/8720475 # <MVC的 ...
图标和文字跟着div比例放大缩小_Word文档页面显示比例与单页多页，文本的输入、修改、删除与插入...
在默认情况下,文档页面都以100%显示,但最大可放大到500%,最小可缩小到10%,可根据自己的爱好设置.一般保持默认即可.另外,还可以设置一屏显示一页还是多页:此外,还能把文档设置为页宽. 在 Wo ...
html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕
#### 移动端单屏布局 > 本篇不属于汇总类的文章,而是把自认为最优的解决方案来进行一些说明. #### 为什么会有单屏布局作为一个前端开发者,我是实在没有理解单屏布局的优势在哪里,尤其是要 ...
Vue.js如何在一个页面调用另一个同级页面的方法
实际开发过程中,当前组件调用完方法之后,也许会调取同一级组件中的方法,本人暂时想到两种办法: 1. vm.$on(event,callback) 新建一个工具函数util.js,代码如下: impor ...
如何在一个页面调用另一个页面
利用iframe <Iframe src="page1.html" width="250" height="200" scrollin ...
dede站怎么在首页调用单页的内容？
{dede:sql sql="SELECT aid,typeid,body FROM `dede_addonarticle` where typeid=2 ORDER BY `aid` DE ...
Web页面中调用迅雷进行单文件和批量下载
费了老大的劲才将页面调用迅雷客户端批量下载搞定,在此将页面调用迅雷进行单文件下载和批量下载进行一个总结. 批量下载主要参照:http://www.jackyrao.com/archives/425 | ...
discuz php单页,Discuz! X2 自定义单页面最简单方法
此方法简单到只有一句话:新建一个专题就行了,还可以自定义二级域名和URL,可以设置是否包括页头.页脚,Title/Keywords/description等信息自然不在话下. 新建完后就可以DIY,想 ...

DouPHP如何在一个页面调用多个单页的内容

DouPHP如何在一个页面调用多个单页的内容相关推荐

最新文章

热门文章