怎么利用js或jquery实现tab效果类似浏览器多窗口多标签的效果??

页面用iframe框架分为左右两部分,左面显示导航,右面显示内容。。现在希望用js或jquery实现如图片红色框圈住的效果,类似浏览器多标签效果,点击左侧导航,右面会多一... 页面用iframe框架分为左右两部分,左面显示导航,右面显示内容。。现在希望用js或jquery实现如图片红色框圈住的效果,类似浏览器多标签效果,点击左侧导航,右面会多一个相应的标签,并且显示相应的主要内容。。。。 展开
 我来答
王啦啦啦98
2018-04-13 · TA获得超过1.2万个赞
知道小有建树答主
回答量:175
采纳率:100%
帮助的人:4.8万
展开全部

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");}

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
戏肖告O
2014-06-26 · TA获得超过441个赞
知道小有建树答主
回答量:331
采纳率:28%
帮助的人:184万
展开全部
可以用tab的插件,有好多,你自己选择一下用吧。http://www.cnblogs.com/lhb25/archive/2012/11/26/10-useful-jquery-tab-plugins.html
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
往事吥堪回首u
2018-06-28 · TA获得超过131个赞
知道答主
回答量:25
采纳率:0%
帮助的人:6.7万
展开全部
我也想知道,是通过什么原理实现的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式