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

how can make label (the 1, 2, 3, etc) of li clickable, not contents?

<ol>     <li value="1">first item</li>     <li>second item</li>     <li>third item</li> </ol> 

here's jsfiddle: http://jsfiddle.net/4c11qwxh/

in example, want href around list numbers - ie. on 1, 2, , 3, not contents ("first item", "second item", "third item").

ideally i'd js , html able create anchor tags li elements. if click on 2, create anchor #2 if refresh page, scroll value.

thanks!

you have generate links javascript in case, because can't make list numbers anchors. it's not difficult jquery. make sure use list start attribute can read this.parentnode.start (or $(this).parent().attr('start')) , adjust numbers left position , 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>