jQuery菜单切换

  

<强>一、标签切换 <强>,,

& 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菜单切换