利用jquery操作dom时,用event.target优化dom操作
html:
<ul > <li data-link="#part1">Part 1</li> <li data-link="#part2">Part 2</li> <li data-link="#part3">Part 3</li> </ul> <section > </section> <section > </section> <section > </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和内容,没有去算索引来对应
实例请跳转至:传送门