0

我已经看到了引导 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 数据库中。

我只想输入标题和段落，然后输入主页标题，但要让链接在主标题下方动态插入页面。

  1. 捕获 h2 和 /h2 之间的文本，为其创建链接和 ID。对页面上的所有 h2 执行此操作。

我一辈子都想不到如何从 PHP 创建的页面中捕获这样的信息。

页面的处理可以在后期使用 jQuery 和 Javascript 或在 PHP 中进行。

更喜欢用 PHP 做事。

忽略第五个元素。

<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
    });
});

**不确定该位是否存在。（获取标签之间的内容/值/文本）

4

2 回答 2

0

你可以用 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>');
}
于 2013-03-15T15:12:17.810 回答
0

我认为 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'
        })
    );
});
于 2013-03-15T15:14:45.597 回答