yahoo 页面的标签效果

时间：2006-12-06 来源：w3g8

分析一下：
顶部是一个ul列表，li里面套着超链。li使用相对定位，选中的li里面的超链使用绝对定位，并使该超链挡住外层li的上下边框与左边的分割竖线。
此次的js比较简单。切换显示内容部分使用了以前的方法：一段效率很高的for循环。
原本以为隐藏最后一个选项右边的分割竖线比较麻烦，修改了好多次。结果意想不到的是最简单的做法是给最外层box固定宽度，再overflow:hidden即可。哈哈
测试地址：
http://www.happyshow.org/sample/20060926/yahootag.html
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML>HEAD>TITLE>yahoo 标签/TITLE>
META http-equiv=Content-Type content="text/html; charset=gb2312">
script type="text/javascript">
var currentTag = 1;
function fivetag(obj,id){
selectMenu(obj);
for (var i =1,j; j=document.getElementById("tag_content_"+i); i++){
      j.style.display="none";
}
document.getElementById("tag_content_"+id).style.display="block";
currentTag++;
if (currentTag>5)
currentTag=1;
}
function selectMenu(obj){
var lia = document.getElementById("menulist").getElementsByTagName("li");
var lialen = lia.length;
for(i=0; ilialen; i++){
      if(lia.getElementsByTagName("a")[0].className=="curMenu")
      lia.getElementsByTagName("a")[0].className = "";
}
obj.className = "curMenu";
}
function init(){
var menulist = document.getElementById("menulist");
setInterval('fivetag(menulist.getElementsByTagName("li")[currentTag-1].getElementsByTagName("a")[0],currentTag)',1000);
}
/script>
STYLE type=text/css>.tag_box {
BORDER-RIGHT: #b0bec7 1px solid; BORDER-TOP: #b0bec7 1px solid; MARGIN: 50px; FONT: 12px Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #b0bec7 1px solid; WIDTH: 400px; BORDER-BOTTOM: #b0bec7 1px solid; HEIGHT: 126px
}
.tag_box UL.menulist {
MARGIN: 0px; OVERFLOW: hidden; WIDTH: 402px; HEIGHT: 20px
}
.tag_box UL.menulist LI {
BACKGROUND: url(tag_bg1.gif) repeat-x; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 19px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 19px; TEXT-ALIGN: center
}
.tag_box UL.menulist LI A {
DISPLAY: block; BACKGROUND: url(tag_pipe.gif) no-repeat right 1px; WIDTH: 80px; COLOR: #18397c; BORDER-BOTTOM: #93a6b4 1px solid; TEXT-DECORATION: none
}
.tag_box UL.menulist LI A:hover {
TEXT-DECORATION: underline
}
.tag_box UL.menulist LI A.curMenu {
BORDER-RIGHT: #91a7b4 1px solid; BORDER-TOP: #91a7b4 1px solid; FONT-WEIGHT: bold; Z-INDEX: 100; BACKGROUND: url(tag_bg2.gif) repeat-x; LEFT: -1px; BORDER-LEFT: #91a7b4 1px solid; WIDTH: 81px; COLOR: #c63; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: -1px; HEIGHT: 21px
}
.tag_box A.nonebg {
BACKGROUND: none transparent scroll repeat 0% 0%
}
.tag_content {
CLEAR: both; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.tag_content IMG.bigConImg {
BORDER-RIGHT: #788a98 1px solid; BORDER-TOP: #788a98 1px solid; DISPLAY: block; FLOAT: left; BORDER-LEFT: #788a98 1px solid; BORDER-BOTTOM: #788a98 1px solid
}
.tag_content H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 3px 6px; WIDTH: 250px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center
}
.tag_content A {
COLOR: #16387c; TEXT-DECORATION: none
}
.tag_content A:hover {
TEXT-DECORATION: underline
}
.tag_content P {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 2px
}
.tag_content UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 3px; PADDING-TOP: 0px
}
.tag_content LI {
MARGIN-BOTTOM: 3px; MARGIN-LEFT: 20px
}
/STYLE>
META content="MSHTML 6.00.2900.2963" name=GENERATOR>/HEAD>
BODY onload=init()>
DIV class=tag_box id=tag_menu>
UL class=menulist id=menulist>
  LI>A class=curMenu onfocus=this.blur() onclick=fivetag(this,1)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Home/A> /LI>
  LI>A onfocus=this.blur() onclick=fivetag(this,2)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Software/A>
  /LI>
  LI>A onfocus=this.blur() onclick=fivetag(this,3)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Product/A>
  /LI>
  LI>A onfocus=this.blur() onclick=fivetag(this,4)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">AboutUs/A>
  /LI>
  LI>A onfocus=this.blur() onclick=fivetag(this,5)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">ContactUs/A>
  /LI>/UL>
DIV class=tag_content id=tag_content_1>IMG class=bigConImg
src="yahoo 标签.files/tag_1_img.jpg">
H5>A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Supercars
for the super-richHome/A>/H5>
P>For those who can drop six figures on a car, there's a fresh crop of shiny
new 2007 models. » More

Time and
again Software
  Negroponte says
  U.S. not at higher risk
  U.S. to
  relax ban of liquids on planes
  U.S.
  pursues closer ties with Kazakhstan

Saints'
storybook return Product/A>/H5>
P>In front of a sellout Superdome crowd, New Orleans rides the emotional wave
to victory over Atlanta. » A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More/A>/P>/DIV>
DIV class=tag_content id=tag_content_4>IMG class=bigConImg
src="yahoo 标签.files/tag_4_img.jpg">
H5>A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Fall
foliage alternatives AboutUs/A>/H5>
P>Dieting with a partner can be motivating, but presents unexpected challenges
as well. » A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More/A>/P>/DIV>
DIV class=tag_content id=tag_content_5>IMG class=bigConImg
src="yahoo 标签.files/tag_5_img.jpg">
H5>A href="http://www.happyshow.org/sample/20060926/yahootag.html#">10 ways to
earn more pay ContactUs/A>/H5>
P>Why settle for your current salary and benefits when you can negotiate for
more? » A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More/A>/P>/DIV>/DIV>修改：
UL style="FONT: 11px Tahoma">
  LI>每隔一段时间自动循环切换Tag (修改于 2006-10-10) /LI>/UL>
DIV style="MARGIN-TOP: 50px; FONT: 12px '宋体'">Writen By A
href="http://www.happyshow.org/" target=_blank>快乐笛子/A>/DIV>/BODY>/HTML>

  不要自动滚动  改JS
最简单的方法。请将
改成
就行了，如果觉得不爽，再把
function init(){
   var menulist = document.getElementById("menulist");
   setInterval('fivetag(menulist.getElementsByTagName("li")[currentTag-1].getElementsByTagName("a")[0],currentTag)',1000);
}这几行也干掉就行了。当然你要看清那几个链接别搞错了！