仿雅虎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标签