利用jquery操作dom时，用event.target优化dom操作

html：

<ul id="contents">
  <li data-link="#part1">Part 1</li>
  <li data-link="#part2">Part 2</li>
  <li data-link="#part3">Part 3</li>
</ul>

<section id="part1">
</section>
<section id="part2">
</section>
<section id="part3">
</section>

css样式

#contents .selected {
  border-bottom: thin solid;
}

section {
  min-height: 4em;
}
#part1 {
  background: #cc9999
}
#part2 {
  background: #99cc99
}
#part3 {
  background: #9999cc
}

js代码

$('#contents li').click(function(event){

$('#contents li').removeClass('selected')
  $(event.target).addClass('selected')
  $('section').hide()
  var linked = $(event.target).data('link')
  $(linked).show()

})

　注意：这里使用data-link属性来关联li和内容，没有去算索引来对应

实例请跳转至：传送门