javascript - 如何仅使 li 值可点击并生成 anchor ？

Question

如何只让 li 的标签(1、2、3 等)可点击，而不是内容？

<ol>
    <li value="1">First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

这是一个 JSFiddle: http://jsfiddle.net/4c11qwxh/

在那个例子中，我只想要一个围绕列表编号的 href - 即。仅在 1、2 和 3 上，而不是内容(“第一个元素”、“第二个元素”、“第三个元素”)。

理想情况下，我想用 JS 和 HTML 做的是能够为 li 元素创建 anchor 标记。因此，如果您单击 2，它会创建一个 anchor #2，这样如果您刷新页面，它就会滚动到该值。

谢谢!

Answer 1

在这种情况下，您将不得不使用 javascript 生成链接，因为您无法制作列表编号 anchor 。使用 jQuery 并不难。只需确保您使用列表开始属性，以便您可以使用 this.parentNode.start(或 $(this).parent().attr('start') 读取它) 并调整数字左侧的位置和宽度:

$('ol li').append(function(i) {
    var number = this.parentNode.start + i;
    return $('<a>', {
        class: 'number',
    	text: number,
        href: '#' + number
    });
});

ol li {position: relative; list-style-type: none;}
ol li .number {
    position: absolute;
    left: -35px;
    width: 35px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol start="4">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>