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元素创建锚标签。因此，如果您单击2，它将创建一个锚＃2，这样如果您刷新页面，它将滚动到该值。

谢谢！

Answer 1

在这种情况下，您必须使用javascript生成链接，因为您无法生成列表编号锚点。使用jQuery并不困难。只需确保使用列表开始属性，以便您可以使用this.parentNode.start（或$(this).parent().attr('start')）阅读它并调整数字左侧位置和宽度：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何才能使li值可单击并生成锚点？

1 个答案: