代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{ display: none; } p.active{ display:block; color:#ff6700; } </style> </head> <body> <ul> <li>alex1</li> <li>alex2</li> <li>alex3</li> <li>alex4</li> </ul> <p>alex1</p> <p>alex2</p> <p>alex3</p> <p>alex4</p> <script type="text/javascript" src="jquery-3.4.1.js"></script> <script type="text/javascript"> $('ul li').click(function(){ $(this).css('color','red').siblings('li').css('color','black'); console.log($(this).index()) $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active') }) </script> </body> </html>