tab切换各种不同的解决方案

来源：互联网发布：aes算法有哪些编辑：程序博客网时间：2024/06/05 15:25

tab切换，做前端的各位大神再熟悉不过，因为运用的场合太多，所以大家可能都不屑于去关心了。不晓得大家遇到这种时是自己马上梳理逻辑写一次呢，还是用已有的模板或自己的库，今天我对自己遇到的情况做了一下总结,对以下几点做了优化。

a，三个写法可根据具体页面使用环境而选择。
b，结构层、表现层、行为层的分离
c，结构层标签选择不受限。
d，对函数传参以避免一个页面多个tab切换行为与样式的相互干扰

1，调用JQ库

   结构层：
<容器  id="容器id">
  <按钮容器 class="tab1">
<包含标签><按钮 class="焦点按钮 class"> ...</按钮 ></包含标签>
<包含标签><按钮 > ...</按钮 ></包含标签>
  </按钮容器>
  <内容容器 class="tab_con">
<内容标签>...</内容标签>
<内容标签 class="hidden">...</内容标签>
  </内容容器 >
</容器 >
行为层：
tab_switch1(容器id,焦点菜单class);
实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab选项卡的不同写法</title><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><style>body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "微软雅黑"; }a { text-decoration: none; }.tab_a { width: 600px; height: auto; margin: 20px auto; }.tab_a .tab1ys { width: 100%; height: 50px; }.tab_a .tab1ys li { width: 200px; float: left; }.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }.tab_a .tab1ys li a.active { background: #333; color: #CCC; }.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }.hidden { display: none; }</style></head><body>    <div class="tab_a" id="tab_a">  <h2>jquery写法</h2>  <ul class="tab1 tab1ys">    <li><a class="active" href="javascript:void(0)">选项卡1</a></li>    <li><a href="javascript:void(0)">选项卡2</a></li>    <li><a href="javascript:void(0)">选项卡3</a></li>  </ul>  <ul class="tab_con tabcon_sy">    <li>选项卡1的内容</li>    <li class="hidden">选项卡2的内容</li>    <li class="hidden">选项卡3的内容</li>  </ul></div><script>//jquery写法function tab_switch1(ele_id,activeclass){$("#"+ele_id+">.tab1").children().each(function() {var xh=$(this).index();$(this).find("*").click(function(){$(this).addClass(activeclass);$(this).parent().siblings().find("*").removeClass(activeclass);$("#"+ele_id+">.tab_con").find("*").addClass("hidden");//alert(xh);$("#"+ele_id+">.tab_con").find("*").eq(xh).removeClass("hidden");})    });}//根据ID调用菜单切换函数tab_switch1("tab_a","active");</script> </body></html>

2.纯JS（通过容器ID传参）

   结构层：
<容器  id="容器id">
  <按钮容器 class="tab1">
<包含标签><按钮 class="焦点按钮 class"> ...</按钮 ></包含标签>
<包含标签><按钮 > ...</按钮 ></包含标签>
  </按钮容器>
  <内容容器 class="tab_con">
<内容标签>...</内容标签>
<内容标签 class="hidden">...</内容标签>
  </内容容器 >
</容器 >
行为层：
tab_switch2(容器id,焦点菜单class);

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab选项卡的不同写法</title><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><style>body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "微软雅黑"; }a { text-decoration: none; }.tab_a { width: 600px; height: auto; margin: 20px auto; }.tab_a .tab1ys { width: 100%; height: 50px; }.tab_a .tab1ys li { width: 200px; float: left; }.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }.tab_a .tab1ys li a.active { background: #333; color: #CCC; }.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }.hidden { display: none; }</style></head><body>  <div class="tab_a" id="tab_b">  <h2>纯js写法(通过容器id传参给函数)</h2>  <ul class="tab1 tab1ys">    <li><a class="active" href="javascript:void(0)">选项卡1</a></li>    <li><a href="javascript:void(0)">选项卡2</a></li>    <li><a href="javascript:void(0)">选项卡3</a></li>  </ul>  <ul class="tab_con  tabcon_sy">    <li>选项卡1的内容</li>    <li class="hidden">选项卡2的内容</li>    <li class="hidden">选项卡3的内容</li>  </ul></div><script>//纯js写法function tab_switch2(ele_id,activeclass){var contain=document.getElementById(ele_id);var tab_tit=contain.querySelectorAll(".tab1>*");var tab_con=contain.querySelectorAll(".tab_con>*");var tab_num=tab_tit.length;var con_num=tab_con.length;for(i=0;i<tab_num;i++){tab_tit[i].onclick=(function(i){return function(){for(j=0;j<con_num;j++){if(i==j){tab_tit[j].firstChild.className=activeclass;tab_con[j].className="";}else{tab_tit[j].firstChild.className="";    tab_con[j].className="hidden";}}}})(i);}}tab_switch2("tab_b","active");</script> </body></html>

3，纯JS（点击按钮调用函数）

   结构/行为层：
<容器>
  <按钮容器 id="按钮容器ID">
<包含标签><按钮 class="焦点按钮class" onclick="tab_switch3(按钮容器ID,内容容器ID,焦点按钮class,序号)"> ...</按钮 ></包含标签>
<包含标签><按钮  onclick="tab_switch3(按钮容器ID,内容容器ID,焦点按钮class,序号)"> ...</按钮 ></包含标签>
  </按钮容器>
  <内容容器 id="内容容器ID">
<内容标签>...</内容标签>
<内容标签 class="hidden">...</内容标签>
  </内容容器 >
</容器 >

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab选项卡的不同写法</title><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><style>body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "微软雅黑"; }a { text-decoration: none; }.tab_a { width: 600px; height: auto; margin: 20px auto; }.tab_a .tab1ys { width: 100%; height: 50px; }.tab_a .tab1ys li { width: 200px; float: left; }.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }.tab_a .tab1ys li a.active { background: #333; color: #CCC; }.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }.hidden { display: none; }</style></head><body><div id="tab_c" class="tab_a">  <h2>纯js写法(点击按钮调用函数)</h2>  <ul class="tab1  tab1ys" id="tab3">    <li><a class="active" href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',0)">选项卡1</a></li>    <li><a href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',1)" >选项卡2</a></li>    <li><a href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',2)">选项卡3</a></li>  </ul>  <ul class="tab_con  tabcon_sy" id="tab_con3">    <li>选项卡1的内容</li>    <li class="hidden">选项卡2的内容</li>    <li class="hidden">选项卡3的内容</li>  </ul></div><script>//纯js写法function tab_switch3(tit_id,con_id,activeclass,this_num){//var contain=document.getElementById(ele_id);var tab_tit=document.getElementById(tit_id);var tab_con=document.getElementById(con_id);var cccc=tab_tit.children;var dddd=tab_con.children;var tab_num1=cccc.length;//alert(tab_num1);for(i=0;i<tab_num1;i++){cccc[i].firstChild.className="";dddd[i].className="hidden";}cccc[this_num].firstChild.className=activeclass;dddd[this_num].className="";}</script></body></html>

阅读全文

0 0