<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>选项卡</title> <style type="text/css"> ul li{ list-style-type: none; float: left; padding-left: 60px; } .yin{ display: none; } .xian{ color: red; } </style> </head> <body> <div id="box"> <div id="one1">11</div> <div id="one2" class="yin">22</div> <div id="one3" class="yin">33</div> <ul> <li id="one_1" class="xian" onclick="xuanxiang('one',1,3)">1</li> <li id="one_2" onclick="xuanxiang('one',2,3)">2</li> <li id="one_3" onclick="xuanxiang('one',3,3)">3</li> </ul> </div> <script type="text/javascript"> function xuanxiang(name,dangqian,zong){ for(var i=1;i<=zong;i++){ var li=document.getElementById(name+'_'+i); var div=document.getElementById(name+i); li.className=i==dangqian?"xian":""; div.style.display=i==dangqian?"block":"none"; } } </script> </body> </html>