Question

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

页面用iframe框架分为左右两部分，左面显示导航，右面显示内容。。现在希望用js或jquery实现如图片红色框圈住的效果，类似浏览器多标签效果，点击左侧导航，右面会多一个相应的标签，并且显示相应的主要内容。。。。





Answer 1

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

Answer 2

可以用tab的插件，有好多，你自己选择一下用吧。http://www.cnblogs.com/lhb25/archive/2012/11/26/10-useful-jquery-tab-plugins.html

Answer 3

我也想知道,是通过什么原理实现的