动态生成内容DIV
Dynamically Generated Contents DIV
我已经看到了bootstrap github页面,以及他们如何处理他们的侧边栏,向下滑动并包含所有文章的标题。
我正试图想出一种方法,将建立在我目前的系统,这是手动输入每个锚点,并创建一个链接。
目前我有
<h1>Main Title</h1>
<a href="#Para5" class="scroll">Para5</a>
<a href="#Para10" class="scroll">Para10</a>
<a href="#Para15" class="scroll">Para15</a>
<a href="#Para20" class="scroll">Para20</a>
<br/>
<h2>Para1</h2>
<p>.....</p>
<h2>Para2</h2>
<p>.....</p>
<h2>Para3</h2>
<p>.....</p>
<h2>Para4</h2>
<p>.....</p>
<h2>Para5</h2>
<p>.....</p>
etc...
然后我必须手动添加这样的标题的id,目标是每5个标题有一个链接和一个按钮,说"显示所有",将显示所有的页面标题。
创建页面时,使用HTML嵌入式文本编辑器输入,因此代码是不可见的,并存储在MySQL数据库中。
我只是想有标题和段落,然后主页的标题,键入,但有链接动态地插入到页面,下面的主要标题。
- 捕获h2和/h2之间的文本,创建链接和ID到它。这样做的所有h2上页面。
我无法想象如何从PHP创建的页面中获取这样的信息。
页面的处理可以使用jQuery和Javascript在post中完成,也可以使用PHP在pre中完成。
更喜欢用PHP做事情。
忽略第5元素
<h1>Main Title</h1>
<div id="paraNav">
</div>
<br/>
<div id="headings">
<h2>Para1</h2>
<p>.....</p>
<h2>Para2</h2>
<p>.....</p>
<h2>Para3</h2>
<p>.....</p>
<h2>Para4</h2>
<p>.....</p>
<h2>Para5</h2>
<p>.....</p>
</div>
目的是获取标题的文本,例如:
$('#headings h2').each(function(i,$el){
var headingTitle = $el.text; **
document.write('<a href="#headingTitle" class="scroll">headingTitle</a>')
$('h2').append.attr({
'id':headingTitle
});
});
**不确定这位是否存在。(在标签之间获取内容/值/文本)
您可以使用jQuery来实现。
这是快速和肮脏的,但可能可以让你开始。我还没有测试过。可能有语法错误
var linkArray = [];
$('h2:nth-child(5)').each(function () {
linkArray.push({
text: $(this).text,
// href: $(this).id
});
});
for (var i = 0; i < linkArray.length; i++) {
$('#linkcontainer').append('<a href="' + linkArray[i].text + '">' + linkArray[i].text + '</a>');
}
我认为jQuery有一些更好的工具来做你想做的事情。如果您尝试使用PHP来完成它,可能是一项草率的工作,而使用jQuery只需几行代码即可完成。就像
$('#content h2:nth-of-type(5n)').each(function(i,$el){
ver headingId = $el.attr('id');
$('#contentNav').append(
$('<a/>').html(headingId).attr({
'href':'#'+headingId,
'class':'scroll'
})
);
});
相关文章:
- 使用JavaScript动态插入DIV的成本有多高
- 根据CHECKBOX输入值动态更新DIV信息
- 在DIV中动态插入HTML并访问新元素
- 根据容器 DIV 中的图像动态调整容器 DIV 的大小
- 在 DIV 标记中动态加载页面
- 检测第三方网站的动态DIV容器的大小
- 在具有特定ID的DIV中使用JavaScript动态添加HTML元素
- 我想使用hashbang URL(blah.com/#!/thingtoload)动态加载页面内容(在DIV中),我有j
- 动态创建一个DIV容器
- 如何使用JavaScript添加动态HTML内容(DIV)
- 动态插入Div会破坏KnockoutJS数据绑定
- 显示和隐藏动态出现的文本的Div
- 使用JQuery在DIV中动态添加和删除广告代码
- 通过Javascript在Div中动态插入Div内容
- 无法拖动动态添加的 DIV
- 三个垂直堆叠的 Div,动态高度
- 动态 Div 宽度影响其他 Div 宽度
- 将DIV动态附加到CodeMirror中(不替换初始代码)
- 添加DIV动态变化事件
- 我想在Div(动态创建)的innerHTML中添加地图