仿雅虎yahoo多標籤切換

 

仿雅虎yahoo多標籤切換

大 | 中 | 小

[2007/11/23 11:18 | 分類: 網站技術 | by admin ]

最近網站要改版，其中網站的改版效果設計模仿了yahoo的多標籤tab切換,先看看yahoo的標籤效果吧

demo效果:yahoo.html 效 果看起來不錯，對於網站內容很多的網站這樣的標籤切換很能節省頁面空間，同樣給瀏覽者以新奇的感覺。好的效果就應當使用快捷效率的方法來實現,本來想借用 yahoo的自身實現代碼，但看來看去覺得其實現程序太複雜這當然是我自己的看法，也許是因爲技術不夠弄不明白程序作者的意圖，去網上搜了一把，結果出來 的都是yahoo一樣的大同小異對於初學或者根本不明白js的人想弄明白太難了，所以想想就乾脆自己寫出一個吧。下面我就把我實現的仿yahoo切換標籤 步驟列出來，給那些跟我一樣鬧不明白yahoo代碼的朋友分享下。

功能：
模仿yahoo的多標籤切換，增加默認顯示狀態。
原理：
我總認爲寫程序和做其他事情一樣，先把其中原理或者計劃弄清楚了那我們實施起來就很容易，對於這個標籤切換我們也一樣想理清實現它的基本原理，然後編寫對應的js代碼和css樣式代碼。
實現這個標籤切換的原理其實很簡單，就是當鼠標滑過它時，讓對應的顯示框給顯示出來，其他的給隱藏掉。
先看看我們所使用到的圖片：
郵箱背景：a

空間背景：b

相冊背景：c

沒用使用時的背景：d

我們的js代碼主要就獲取鼠標是否在滑動到對應標籤上，如果是我們就通過js改變它的背景爲對應始終狀態(a或b或c),另外行的背景爲沒用使用時的背景(d)，同事顯示、隱藏要展示的對應標籤內容。
第一步：html組織顯示

<div id="tabstop"></div>
<div id="tabscontent">
<div class="tabs">
<ul id="tabs1" class="tabsbgc">
<li><a href="http://www.xqbar.com/admin.php#"><strong>郵箱</strong></a></li>
<li><a href="http://www.xqbar.com/admin.php#"><strong>空間</strong></a></li>
<li><a href="http://www.xqbar.com/admin.php#"><strong>相冊</strong></a></li>
</ul>
<div id="tabs1previewdiv" class="previewblock"></div>
<div class="clear"></div>
</div>
<div class="tabs">
<ul id="tabs2" class="tabsbg">
<li><a href="http://www.xqbar.com/admin.php#"><strong>博客</strong></a></li>
<li><a href="http://www.xqbar.com/admin.php#"><strong>羣組</strong></a></li>
<li><a href="http://www.xqbar.com/admin.php#"><strong>股票</strong></a></li>
</ul>
<div id="tabs2previewdiv" class="previewnone"></div>
<div class="clear"></div>
</div>
</div>
<div id="tabsbottom"></div>

css 代碼
<style type="text/css">
#tabstop{background:url(images/tabstb.gif) 0px 0px no-repeat;width:350px;height:4px; overflow:hidden;}
#tabscontent{width:348px;border-right:1px solid #7bbdff;border-left:1px solid #7bbdff;background:url(images/tabsbg.gif) 0px 0px repeat;}
.tabs{width:348px;}
.tabs ul{list-style:none;height:40px;}
.tabs li{display:block;float:left;width:112px;height:40px;line-height:40px; text-align:center;}
.tabsbg{background:url(images/tabs.gif) 4px 0px no-repeat;}
.tabsbga{background:url(images/tabsa.gif) 4px 0px no-repeat;}
.tabsbgb{background:url(images/tabsb.gif) 4px 0px no-repeat;}
.tabsbgc{background:url(images/tabsc.gif) 4px 0px no-repeat;}
.previewblock{margin:0px auto;width:338px;height:120px;line-height:20px;border-right:1px solid #7bbdff;border-left:1px solid #7bbdff;border-bottom:1px solid #7bbdff; background-color:#FFFFFF;}
.previewnone{margin:0px auto;width:338px;height:120px;line-height:20px;border-right:1px solid #7bbdff;border-left:1px solid #7bbdff;border-bottom:1px solid #7bbdff; background-color:#FFFFFF;display:none;}
#tabsbottom{background:url(images/tabstb.gif) 0px -4px no-repeat;width:350px;height:4px; overflow:hidden;}
</style>

第二步：js代碼編寫
首先引入js框架prototype.js
<script type="text/javascript" src="script/prototype.js"></script>
實質函數代碼：
<script type="text/javascript">
var tabs=new Array;
var previewdiv=new Array;
function display_tabs(I,J,tabsbg){
tabs[I].className="tabsbg"+tabsbg;
tabs[J].className="tabsbg";
previewdiv[I].className="previewblock";
previewdiv[J].className="previewnone";
}
function init_tabs(tabsid,tabsbg){
tabs[0]=$("tabs1");
previewdiv[0]=$("tabs1previewdiv");
tabs[1]=$("tabs2");
previewdiv[1]=$("tabs2previewdiv");
if(tabsid=="tabs1"){display_tabs(0,1,tabsbg);}
else{display_tabs(1,0,tabsbg);}
Event.observe(tabs[0].getElementsByTagName('li')[0],'mouseover',function(){display_tabs(0,1,"a");});
Event.observe(tabs[0].getElementsByTagName('li')[1],'mouseover',function(){display_tabs(0,1,"b");});
Event.observe(tabs[0].getElementsByTagName('li')[2],'mouseover',function(){display_tabs(0,1,"c");});
Event.observe(tabs[1].getElementsByTagName('li')[0],'mouseover',function(){display_tabs(1,0,"a");});
Event.observe(tabs[1].getElementsByTagName('li')[1],'mouseover',function(){display_tabs(1,0,"b");});
Event.observe(tabs[1].getElementsByTagName('li')[2],'mouseover',function(){display_tabs(1,0,"c");});

}
</script>
函數的調用：
<script>init_tabs('tabs2','a');</script>
想要使用哪個就定義那個爲默認的顯示狀態
效果：三欄導航 yahoo.html     兩欄導航 yahoo_3.html

代 碼就寫到這裏，我們可以在此基礎上做出我們要其他功能的擴展，甚至可以使用ajax來擴展<div id="tabs1/2previewdiv" class="previewnone"></div>動態要顯示的內容，具體大家擴展吧，有什麼不明白的地方可以留言或者qq

Tags: yahoo標籤