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

最新推荐文章于 2023-08-10 18:55:59 发布
最新推荐文章于 2023-08-10 18:55:59 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： HTML5 jQuery 文章标签： html5 tab切换 tab方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxfjnfjcn/article/details/77898987
版权

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].οnclick=(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" οnclick="tab_switch3(按钮容器ID,内容容器ID,焦点按钮class,序号)"> ...</按钮 ></包含标签>
   <包含标签><按钮  οnclick="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)" οnclick="tab_switch3('tab3','tab_con3','active',0)">选项卡1</a></li>
    <li><a href="javascript:void(0)" οnclick="tab_switch3('tab3','tab_con3','active',1)" >选项卡2</a></li>
    <li><a href="javascript:void(0)" οnclick="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
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】前端必学的tab栏切换布局分析，覆盖所有面试知识点
m0_60721823的博客
04-16 770
但是在上例中我们获取的是元素属性值，并不是自定义属性值。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。（2） element.getAttribute(‘属性’) //主要获得自定义的属性（指程序员自己定义的属性）（2） element.setAttribute(‘属性’) //主要设置自定义的属性（指程序员自己定义的属性）想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
tab标签切换自适应高度
qq_42717786的博客
04-02 1294
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>tab</title> <style> *{margin:0;padding:0;list-style:none;} #wrap{width:60...
Vue——vuetify中实现tab切换
月来better
08-06 2225
使用vuetify中的组件 v-tabs v-tabs-items <v-tabs v-model="tab"> <v-tab key="tab1">tab1</v-tab> <v-tab key="tab2">tab2</v-tab> <v-tab key="tab3">tab3</v-tab> <v-tab key="tab4">tab4</v-tab> </v-tabs>.
几种项目中常用的tab选项卡切换
最新发布
qq_43766059的博客
08-10 2970
页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。
前端基础之tab栏切换
m0_53602804的博客
01-27 592
状态栏转换基础
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 5865
给下图的静态页面添加tab栏切换效果。
Vue解决echart在element的tab切换时显示不正确问题
10-15
总的来说，解决Vue中ECharts在Element Tab切换时显示不正确的问题，主要是通过合理控制图表的渲染时机，确保ECharts在有准确容器尺寸的情况下初始化或更新图表。利用Vue的响应式系统，如`v-if`，可以帮助我们轻松...
解决vue中el-tab-pane切换的问题
10-15
除了上述问题的解决方案，我们还可以通过以下方式优化`el-tab-pane`的渲染性能： 4. **使用`v-if`控制子组件渲染**：如果某个`el-tab-pane`的内容是动态加载或者有复杂的交互逻辑，可以考虑添加一个控制变量，如`...
解决vue-router 切换tab标签关闭时缓存问题
10-15
本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的缓存机制是通过`<keep-alive>`组件实现的，它能够保留组件的状态并在再次渲染时复用，从而提高应用性能。默认情况...
Vue2.0 多 Tab切换组件的封装实例
08-29
" Vue2.0 多 Tab切换组件的封装实例" 本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例，通过对Tab切换...Vue2.0 多 Tab切换组件的封装实例提供了一种灵活、可扩展的解决方案，满足日常需求，具有良好的应用前景。
TabJS:Tab切换解决方案，使用原生JS
07-01
支持定制切换函数等以支持复杂的RIA需求。构造参数config (Object)：配置对象，包含以下参数(带有“*”标识为必选)：bonds (Array)：绑定tab与相关dom，复杂数组格式，每组一对，可传入dom或id字符串。selected ...
zepto实现的简洁tab选项卡，实现超简单的，亲测可用
07-04
zepto实现的简洁tab选项卡，亲测可用
zepto.tab:Zepto tab 插件
07-14
#zepto.tab zepto.tab 是一款支持触摸屏下的tab插件，依赖zepto.js ##Platform 和zepto支持的平台一样 ##Depend 依赖zepto v1.0.0+，除默认模块还需touch模块支持 ##Building 构建过程使用ant，安装ant参照 构建时在项目根目录运行ant build.release，稍等片刻即可构建成功，构建成功后build目录为输出文件 如若构建失败，请检查ant是否安装正确 ##Authors yanhaijing ##Issues ##Copyright and license Copyright :copyright: 2013 yanhaijing. All Rights Reserved Licensed under the MIT-LICENSE; you may not use this work except in compli
前端实现tab栏切换，这么常见的案例你学会了吗？
热门推荐
阿牛的博客
03-31 1万+
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
在vue中实现tab切换效果
qq_44866810的博客
06-01 928
在vue中实现tab切换效果。
Zepto：实现移动端tab选项
KaiSarH
03-01 705
Zepto实现移动端tab选项
简单实现Tab菜单的切换功能
weixin_46267824的博客
02-14 2247
做毕设时有点击菜单/导航栏项目然后切换页面内容的需求，记录一下这个小功能 主要思路 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子 建立导航标签/按钮到内容的映射字典，获取点击元素的class属性，在字典中查找对应的内容class属性，然后在展示盒子中显示该内容即可 html代码 <body> <!-- 导航菜单 --> <div class="nav"> <ul> <li cl
用四种不同的方法实现 tab栏切换
q2211164的博客
05-27 1052
基础片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
html中切换tab，echarts不展示
07-14
你好！对于切换tab时echarts图表不展示的问题，可能是因为在切换tab时，echarts图表所在的容器隐藏或者不可见导致的。你可以尝试以下几个解决方案： 1. 确保在切换tab时，echarts图表所在的容器是可见的。你可以通过修改容器的CSS属性来实现，例如设置`display: block`，或者将容器的高度设置为非零值。 2. 如果你是使用的Vue或React等前端框架，可以考虑在tab切换时手动触发echarts的resize事件，以确保图表能够正确地重新渲染。具体方法可以参考echarts的官方文档。 3. 如果以上方法都没有解决问题，你可以尝试在tab切换时延迟一段时间再重新渲染echarts图表。例如使用setTimeout函数将重新渲染图表的代码延迟执行。 希望以上解决方案能够帮助到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值