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

如楼上说的，推荐最好使用插件，网络上搜索jquery tabs，免费的轻量级的很多。
如果非要手工的话也可以，只是相对麻烦。
如：
<ul>
<li><a href="#one">第1个tabs</a></li>
<li><a href="#two">第2个tabs</a></li>
<li><a href="#three">第3个tabs</a></li>
</ul>
<div id='one'>第1个tabs内容</div>
<div id='two' style='display:none;'>第2个tabs内容</div>
<div id='three' style='display:none;'>第3个tabs内容</div>在点击第二个tabs的时候，将其他1和3的内容div隐藏掉，显示出id='two'的div就好了。不过css得自己写。挺麻烦的。