怎么利用js或jquery实现tab效果类似浏览器多窗口多标签的效果？？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么利用js或jquery实现tab效果类似浏览器多窗口多标签的效果？？相关的知识，希望对你有一定的参考价值。
页面用iframe框架分为左右两部分，左面显示导航，右面显示内容。。现在希望用js或jquery实现如图片红色框圈住的效果，类似浏览器多标签效果，点击左侧导航，右面会多一个相应的标签，并且显示相应的主要内容。。。。
js的代码实现如下：
234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253/** * tabs * @author 橡树小屋 */var tabs=function() function tag(name,elem) return (elem||document).getElementsByTagName(name); //获得相应ID的元素 function id(name) return document.getElementById(name); function first(elem) elem=elem.firstChild; return elem&&elem.nodeType==1? elem:next(elem); function next(elem) do elem=elem.nextSibling; while( elem&&elem.nodeType!=1 ) return elem; return set:function(elemId,tabId) var elem=tag("li",id(elemId)); var tabs=tag("div",id(tabId)); var listNum=elem.length; var tabNum=tabs.length; for(var i=0;i<listNum;i++) elem[i].onclick=(function(i) return function() for(var j=0;j<tabNum;j++) if(i==j) tabs[j].style.display="block"; //alert(elem[j].firstChild); elem[j].firstChild.className="selected"; else tabs[j].style.display="none"; elem[j].firstChild.className=""; )(i) ();window.onload=function() tabs.set("nav","menu_con"); 参考技术B 可以用tab的插件，有好多，你自己选择一下用吧。http://www.cnblogs.com/lhb25/archive/2012/11/26/10-useful-jquery-tab-plugins.html本回答被提问者采纳 参考技术C 我也想知道,是通过什么原理实现的Vue.js实现tab切换效果
利用Vue实现简易tab切换效果
1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一些简单的特效。
1.2 实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。
1.3 tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构
<div id="app"> <ul class="tab-tilte"> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> <div class="tab-content"> <div>内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> </div> </div>
1.4 tab切换第二步写上对应的css样式
<style type="text/css"> ul li margin: 0; padding: 0; list-style: none; #app width: 600px; height: 400px; margin: 0 auto; border: 1px solid #ccc; .tab-tilte width: 90%; .tab-tilte li float: left; width: 25%; padding: 10px 0; text-align: center; background-color:#f4f4f4; cursor: pointer; /* 点击对应的标题添加对应的背景颜色 */ .tab-tilte .active background-color: #09f; color: #fff; .tab-content div float: left; width: 25%; line-height: 100px; text-align: center; </style>
1.5tab切换第三步引入vue实现
<body>
<div id="app">
<ul class="tab-tilte">
<li @click="cur=0" :class="active:cur==0">标题一</li>
<li @click="cur=1" :class="active:cur==1">标题二</li>
<li @click="cur=2" :class="active:cur==2">标题三</li>
<li @click="cur=3" :class="active:cur==3">标题四</li>
</ul>
<div class="tab-content">
<div v-show="cur==0">内容一</div>
<div v-show="cur==1">内容二</div>
<div v-show="cur==2">内容三</div>
<div v-show="cur==3">内容四</div>
</div>
</div>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var app = new Vue(
el: "#app",
data:
cur:0 //默认选中第一个tab
);
</script>
</body>
效果图：
1.6tab切换效果改进与优化
（1） 以上代码看起来似乎很简单容易懂，而且效果也能实现，但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值，因此我们有必要改进一下代码的写法。
（2）利用vue提供的v-for指令遍历得到索引和值 如下所示：
<div id="app"> <!-- 推荐这种写法--> <ul class="tab-tit"> <li v-for="(title,index) in tabTitle" @click="cur=index" :class="active:cur==index">title</li> </ul> <div class="tab-content"> <div v-for="(m,index) in tabMain" v-show="cur==index">m</div> </div> </div> <script type="text/javascript"> window.onload = function() var app = new Vue( el:‘#app‘, data: tabTitle: [‘标题一‘, ‘标题二‘, ‘标题三‘, ‘标题四‘], tabMain: [‘内容一‘, ‘内容二‘, ‘内容三‘, ‘内容四‘], cur: 0 //默认选中第一个tab ) </script>
最终效果图如下：
以上是关于怎么利用js或jquery实现tab效果类似浏览器多窗口多标签的效果？？的主要内容，如果未能解决你的问题，请参考以下文章