网易,雅虎动态标签效果

在网上搜罗了一圈,要么复杂,要么有问题,要么不兼容,算了自己写了一个。

<style type="text/css">
body { font-size:14px; font-family:"Arial Black";}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(images/tagleft.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(images/bg.gif) repeat-x; height:350px;  padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!–
var cid = 0;
function getTab(flag){
    var elList;
    elList = document.getElementsByTagName("li");
    for(var i=0;i < elList.length;i++){
        elList[i].className = "";
    }
    elList[flag].className = "selectTag";
    elList[flag].blur();
    document.getElementById("tagContent" + cid).className = "tagContent";
    document.getElementById("tagContent" + flag).className = "tagContent selectTag";
    cid = flag;
}
//–>
</SCRIPT>
</head>
<body>

<div id="con">
  <ul id="tags">
    <li  class="selectTag"><a href="javascript:void(0)" onclick="getTab(0);">标签一</a></li>
    <li><a href="javascript:void(0)" onclick="getTab(1);">标签二</a></li>
    <li><a href="javascript:void(0)" onclick="getTab(2);">自适应宽度的标签</a></li>
  </ul>
  <div id="tagContent">
  <div id="tagContent0" class="tagContent selectTag">第一个标签的内容</div>
    <div id="tagContent1" class="tagContent">第二个标签的内容</div>
    <div id="tagContent2" class="tagContent">第三个标签的内容</div>
  </div>   
</div>

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: