<!DOCTYPE html><html lang=“en”><head><meta charset=“UTF-8”><title>选项卡</title><style type=“text/css”> * { margin: 0; padding: 0 } #com_title li { width: 100px; height: 30px; display: inline-block; border: 1px solid #000; } .main { display: none; } .on { display: block; background: #ccc; } .onmain { display: block; } #com_title1 li { width: 100px; height: 30px; display: inline-block; border: 1px solid #d58512; } .main1 { display: none; } .on1 { display: block; background: #dd514c; } .onmain1 { display: block; }</style></head><body><ul id=“com_title”><li class=“on”><a>动态</a></li><li><a>标题</a></li></ul><div class=“main onmain”>111111</div><div class=“main”>222222</div><ul id=“com_title1”><li class=“on1”><a>动态2</a></li><li><a>标题2</a></li></ul><div class=“main1 onmain1”>动态2动态2</div><div class=“main1”>标题2标题2</div></body></html><script src=‘js/zepto.js’></script><script>// $("#com_title li").on(“click”, function () {// let index = $(this).index();// $(this).addClass(“on”).siblings().removeClass(“on”);// $(".main “).eq(index).addClass(“onmain”).siblings().removeClass(“onmain”);// })function tabChange(titli, maindiv, onli, ondiv) { $(titli).on(“click”, function () { let index = $(this).index(); $(this).addClass(onli).siblings().removeClass(onli); $(maindiv).eq(index).addClass(ondiv).siblings().removeClass(ondiv); })}tabChange(’#com_title li’, ‘.main’, ‘on’, ‘onmain’);tabChange(’#com_title1 li’, ‘.main1’, ‘on1’, ‘onmain1’);</script>