<!doctype html> <html> <head> <meta charset="utf-8"> <style> ul,li{ list-style-type:none; } li{ 50px; height:30px; background:white; border:1px solid #CCC; display:inline; padding:8px; cursor:pointer; } div{ 400px; height:100px; border:1px #999999 solid; display:none; } .active { background:#333; color:white; } </style> <script src="jquery-1.11.2.js"></script> <script> /*window.onload = function () { var ali = document.getElementsByTagName('li'); var adiv = document.getElementsByTagName('div') for(var i = 0; i < ali.length; i++) { ali[i].index = i; ali[i].onclick = function () { for(var i = 0; i < adiv.length; i++) { ali[i].className = ''; adiv[i].style.display = 'none'; } ali[this.index].className = 'active'; adiv[this.index].style.display = 'block'; } } }*/ $(function () { $('li').click(function () { $('li').attr('class',''); $('div').css('display','none'); $(this).attr('class','active'); $('div').eq($(this).index()).css('display','block'); }) }) </script> <title>无标题文档</title> </head> <body> <ul> <li >选项一</li> <li>选项二</li> <li>选项三</li> </ul> <div style="display:block;">11111</div> <div>22222</div> <div>33333</div> </body> </html>