CODEWITHSUNDEEP
javascriptjqueryhtmlcss
oxuser
oxuser

Reputation: 1327

How can I make only the li value clickable and generate an anchor?

How can I make only the label (the 1, 2, 3, etc) of the li clickable, but not the contents?

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

Here's a JSFiddle: http://jsfiddle.net/4c11qwxh/

In that example, I only want a href around the list numbers - ie. only on 1, 2, and 3, not the contents ("First Item", "Second Item", "Third Item").

Ideally what I'd like to do with JS and HTML is be able to create anchor tags for the li elements. So if you click on 2, it will create an anchor #2 so that if you refresh the page, it will scroll to that value.

Thanks!

Upvotes: 2

Views: 147

Answers (1)

dfsq
dfsq

Reputation: 193261

You will have to generate links with javascript in this case, because you can't make list numbers anchors. It's not that difficult with jQuery. Just make sure you use list start attribute so you can read it with this.parentNode.start (or $(this).parent().attr('start')) and adjust numbers left position and width:

$('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>

Upvotes: 1

Related Questions