<强>一、标签切换强> <强>,,强>
& lt; ! DOCTYPE html> & lt; html> & lt; head> & lt; meta charset=" utf - 8 "比; & lt; title> & lt;/title> & lt; link  href=" https://www.yisu.com/zixun/app.css ", rel="样式表"/比; & lt; script  src=" https://www.yisu.com/zixun/jquery-1.10.1.min.js "祝辞& lt;/script> & lt; script  src=" https://www.yisu.com/zixun/app.js "祝辞& lt;/script> & lt;/head> & lt; body> & lt; ul id=皌abfirst”比; & lt; li 类=" tabin "祝辞标签1 & lt;/li> & lt; li>标签2 & lt;/li> & lt; li>标签3 & lt;/li> & lt;/ul> & lt; div  class=" content contentfirst”比; 内容1 & lt;/div> & lt; div 类=癱ontentfirst”比; 内容2 & lt;/div> & lt; div 类=癱ontentfirst”比; 内容3 & lt;/div> & lt;/body> & lt;/html>
ul、李{ 保证金:0; 填充:0; list-style:没有; } 李{ 浮:左; background - color: # 868686; 颜色:# FFFFFF; 填充:5 px; margin-right: 2 px; 边界:1 px solid 白色; } .tabin { background - color: # 6 e6e6e; 边界:1 px solid # 6 e6e6e; } .contentfirst { 明确:,; background - color: # 6 e6e6e; 颜色:# FFFFFF; 宽度:300 px; 身高:100 px; 填充:10 px; 显示:没有; } .content { 显示:块; }
<强>二、标签切换数据加载强>
& lt; ! DOCTYPE html> & lt; html> & lt; head> & lt; meta charset=" utf - 8 "比; & lt; title> & lt;/title> & lt; link  href=" https://www.yisu.com/zixun/app.css ", rel="样式表"/比; & lt; script  src=" https://www.yisu.com/zixun/jquery-1.10.1.min.js "祝辞& lt;/script> & lt; script  src=" https://www.yisu.com/zixun/app.js "祝辞& lt;/script> & lt;/head> & lt; body> & lt; ul id=皌abfirst”比; & lt; li 类=" tabin "祝辞标签1 & lt;/li> & lt; li>标签2 & lt;/li> & lt; li>标签3 & lt;/li> & lt;/ul> & lt; div  class=" content contentfirst”比; 内容1 & lt;/div> & lt; div 类=癱ontentfirst”比; 内容2 & lt;/div> & lt; div 类=癱ontentfirst”比; 内容3 & lt;/div> & lt; br /比; & lt; br /比; & lt; br /比; & lt; br /比; & lt; ul id=皌absecond”比; & lt; li 类=" tabin "祝辞装载完整页面& lt;/li> & lt; li>装载部分页面& lt;/li> & lt; li>装载网络数据& lt;/li> & lt;/ul> & lt; div id=癱ontentsecond”比; & lt; div id=皉ealcontent”比; & lt;/div> & lt;/div> & lt;/body> & lt;/html>ul、李{ 保证金:0; 填充:0; list-style:没有; } 李{ 浮:左; background - color: # 868686; 颜色:# FFFFFF; 填充:5 px; margin-right: 2 px; 边界:1 px solid 白色; } .tabin { background - color: # 6 e6e6e; 边界:1 px solid # 6 e6e6e; } .contentfirst { 明确:,; background - color: # 6 e6e6e; 颜色:# FFFFFF; 宽度:300 px; 身高:100 px; 填充:10 px; 显示:没有; } .content { 显示:块; } 李{# tabsecond 浮:左; background - color: # FFFFFF; 颜色:蓝色; 填充:10 px; margin-right: 2 px; 光标:指针; } # tabsecond li.tabin { background - color: # f2f6f8; 边界:1 px solid # 000000; 边界底部:0; z - index: 100; 位置:,相对; } # contentsecond { 宽度:500 px; 身高:200 px; 填充:10 px; background - color: # F2F6F8; 明确:,; 边界:1 px solid # 000000; 上图:,2 px; 位置:,相对; }jQuery菜单切换